アン

Yukino

私のおすすめの14サイトを紹介しますね！海外サイトも使えるようになるとぐんと幅が広がりますよ！

写真素材が無料なのは広告収入があるから

Yukino

サイトの紹介の前に、なぜ無料で利用できるのか、知っておきましょうね！

インターネット上で無料配布されているほとんどのサービスは広告収入があるから無料ですね。 一般の方が写真を投稿して、DLされた分に応じて収入になるものが多く、それはサイトの広告収入から支払われる場合がほとんどです。 ここでは、安心して使えるサイトをご紹介します。

アン

カメラが得意なら投稿して副収入にしてもいいですよね！

無料で使える海外＆国内おすすめ写真素材サイト14選

Yukino

Yukino 私がよく利用するサイトです。それぞれのサイトの特徴も書いておきましたので参考にしてくださいね。

1. Pexels

https://www.pexels.com/

検索が使いやすい。ビデオも増えてきていて、素材探しの時マストで使っているサイトのひとつ。サイズ指定してダウンロードできるのがNICE!帰属表記必要なし

2. Unsplash

https://unsplash.com/

モダンアート系幾何学や特徴的な建物などアーティスティックなものが多い。ちょっと寂しさを感じるようなものにも使える。帰属表記必要なし

3. pixabay

https://pixabay.com/

明るい写真が多く、使いやすい。イラストが豊富。帰属表記必要なし

4. stockvault

https://www.stockvault.net/

カテゴリー検索がとにかく便利！素材数は他に比べて少し落ちますが、日々新しいものが追加されます。帰属表記必要なしですが、一部商用利用できないものもあります。

5. photoAC

https://www.photo-ac.com/

日本人を探すならこのサイト。無料会員だと１日に５回までしか検索できないので慎重に。帰属表記必要なし

6. PAKUTASO

https://www.pakutaso.com/

こちらも国内サイト。国内サイトはやっぱりちょっと古い感じが否めないですが、メディアやブログなどのサムネイルや商材LPなどに使える写真が多い印象。帰属表記必要なし

7. freepik

https://www.freepik.com/

写真素材はもちろん、UIデザインの参考にしたりもできるサイト。帰属表記必要！

8. BURST

https://burst.shopify.com/

Shopifyが運営する素材サイト。こちらもカテゴリー検索が使いやすい。帰属表記必要なし

9. Gratisography

https://gratisography.com/

コミカルが得意なこのサイト！ブログのサムネイルに使えそうなものが多く、切り抜いてアニメーションをつけて動かしたりしても面白いかも。帰属表記必要なし

10. picjumbo

https://picjumbo.com/

明るい光が使われているポジティブな写真が多い
プレミアムプラン月額料金の10%は、Hope for Children（https://www.hope-for-children.org/）という途上国の子ども支援団体に寄付される。
いいな！と思ったら有料プランの写真だった、ということが割と起こりますが、フリー素材も3,000以上あります。
フリー素材だけをダウンロードできる「Download All Free Photo」というのもあります。無料で3000以上の写真とモックアップ３種がボーナスで付いてきます。ダウンロードの時、有志でいくらか支払えるようになっています。
帰属表記必要なし

11. rawpixel

https://www.rawpixel.com/

クリエイティブ
アート系もあって女性的なものが多い。
フリープランは一日10枚までのDL制限があります。
一部、商用利用ができないものもあるので、DLページでRoyalty Free Photoと記載があるか確かめましょう。
no attribution

12. reshot

https://www.reshot.com/

海外サイトにあるアジア系の写真は、欧米人のイメージが強いことが多く使いにくいのですが、このサイトのアジア系写真は結構使えそうなものが多い印象。帰属表記必要なし

13. Foodiesfeed

https://www.foodiesfeed.com/

飯テロならこれ！洋食が多いですが、isockと遜色ないほどのハイクオリティです。帰属表記必要なし

14. Styled Stock

https://styledstock.co/

“Feminine stock photography”=女性的な写真ストックサイトというキャッチコピーで、掲載されている写真はまさにキラキラ女子系
帰属表記必要なし

アン

こんなにたくさんの中から選べるなんて楽しみになってきました！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

前回のレッスン↓

The post ［商用利用可］海外＆日本の無料写真素材サイト14選！ first appeared on Linksbase.

• トーン＆マナーが何か説明できる
• 参考サイトを見つけて分析できる

アン

ワイヤーフレームからどうやってデザインにしていけばいいですか？

Yukino

デザインには一定のルールが必要。それがトーン＆マナーです

トーン＆マナーとは「〇〇らしさ」

Yukino

LINEってどんなデザインですか？

アン

緑で大文字ではっきりした感じで・・

Yukino そうですね！そのイメージってLINEらしさだと思いませんか？

トーン＆マナーの目標は、そのブランド「らしさ」を伝えることです。 つまりこれはブランディングなのです。 ウェブデザインも、そのブランドのイメージを「造る」あるいは「守る」必要があります。 そのために、緑で大文字ではっきりした感じ、というルールを使っているというわけです。 これを広告業界でトーン＆マナーと言います。  

Yukino

この部分に関われるって、素敵な仕事だと思いませんか？

トーン＆マナーではターゲットと市場を常に想像しよう

逆に、 緑で大文字ではっきりした感じ と聞いてLINEが思い浮かびますか？ 大半の日本人はそうでしょう。 ということは、LINEは日本でのブランディングが成功していると言えるでしょう。 しかし、これが韓国だとします。 もしかしたら 緑で大文字ではっきりした感じは、 検索エンジンのNAVERだと思われるかもしれません。  

• 作ろうとしているトーン＆マナーがお客様に浸透しやすいか？
• 業界と自社の立ち位置から、どんなイメージをトーン＆マナーとしたらいいか？

常にターゲットであるお客様と業界を見るクセをつけましょう。  

トーン＆マナーがずれているとき

ブランドの「らしさ」がないほかに、「当たり前」と違っているときもトンマナがずれていると感じます。 例えば、こちらはリラクゼーションスパのウェブデザインです。     色、フォントを変えてみます。     リラクゼーションなのに

• オレンジと青
• 太いゴシックフォント

これは多くの人がイメージする当たり前とずれています。 また、ページ内の1セクションでも違うトンマナを使ったデザインが紛れても違和感があります。 デザイン全体を通してこういった「ずれ」がないか考えるようにしましょう。  

トーンマナーの決め方

それでは実際にトンマナを決めていきましょう。 実際の現場では、クライアントを見極めて以下の方針で進めるのがおすすめです。

• こだわりのあるクライアント→一緒に考える
• デザインやブランディング 、マーケティングに弱そう→デザイナーが積極的に提案

1. 参考サイト・見本を決める

まずはお手本となる参考サイトを決めましょう。 参考サイトはとても重要です。 始めのうちは、完コピくらいの勢いでもいいでしょう。 デザインは何十年とやっているベテランでもわからないと言います。 ウェブデザインはアートではなくビジネスツールを作るものなので、そういった観点からも参考サイトを決めておくことは重要です。

参考サイトを探す

ヒアリングシートでクライアントが参考サイトを提示しているので、それに似た別サイトを2−3つピックアップします。 以下のようなサイトで探しましょう

• LP Advance
• SANKOU!
• MUUUU
• Web Design Clip
• Pinterestで「Webデザイン」「Web design」等で検索してみてください！

分析する

ピックアップしたら、クライアントが提示したものと

• 似ているところ
• 違うところ

を考えておきます。 その分析をもとに、ウェブサイトに活かすところ、オリジナリティを出すところなどを決めていきましょう。

2. パーツごとにルールを決める

参考サイトから特徴を読み取ったら、具体的にルールを決めていく段階です。

色

色の組み合わせは「hexカラーコード」をメモしましょう。 hexコードは＃で始まる6桁の英数字で表される色を特定するコードです。 コーディングで必要になるのですが、この段階では、ひとまずコードをメモる、ということだけやっておいてください。 Coolorsというサイトを使って組み合わせを考えたり、アカウントを作って保存しておくと便利です。 https://coolors.co/ ↓スペースキーを押すたびに色の組み合わせが変わります。      

フォント

フォントが与える印象は大きいのです。 絶対決めておくべきなのは ゴシック体系か明朝体系かということです。

• ゴシック体のイメージ：ポップ、活発、元気、しっかり・・・
• 明朝体系のイメージ：洗練された、都会的、高級感・・・

タイトルや見出しなど、本文以外のフォントはブランディング重視で決めておきます。 細かい文字になる本文は、読みやすいかを重視するのが良いです。   フォントが見られるサイト

• Google Fonts
• Adobe Fonts
• Font In Use
• ためしがき

イラスト・写真

使用するイラストや写真もイメージを左右します。

例えば、男の子のイラスト。印象が全く変わりますよね？

以下のサイトなどを使って、使いたいアイコンや写真のイメージを決めておきましょう。

• Photo AC
• FreePik
• Vecteezy
• Pexels
• Unsplash

商用利用ができるか確認しよう

フォント、イラスト、写真は、無料の物も多く出ていますが、以下のことを確認してから使うようにしましょう！

• 商用利用ができるか
• 引用元を明記する必要があるか

上記に反して素材を使った場合、ペナルティが課されることもあるので注意が必要です。

クライアントも巻き込んでいこう

Webデザインは制作サイドだけでなく、クライアントも一緒に考えるのが重要です。 デザインが決まるまではしっかりと話し合いをして、イメージを固めていきましょう。 これができないと、「やっぱりちがったから直して」になってしまいます。 こまめなコミュニケーションを心がけましょう！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post Webデザインのトーン＆マナーとブランディング first appeared on Linksbase.

• ワイヤーフレームとは何か説明できる
• XDでワイヤーフレームを作れる
• XDのショートカットを覚える

ワイヤーフレームってなんだ？

ワイヤーフレームはウェブデザインの骨格のことです。 ヒアリングシートをもとに「どこに」「なにを」配置するかを決めていきます。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

ウェブデザインのスクールに行っても、ワイヤーフレームについては教えてくれませんでした。
多分、多くのスクールがデザインツールの使い方とコードの書き方のみです。
しかしながら、ヒアリングで聞いたことをデザインにいきなり起こそうと思ってもなかなかうまく進まないものです。
大まかな設計図としてワイヤーフレームを書くことで、頭が整理されていくはずです。

なぜワイヤーフレームを書くのか？

コンテンツの過不足を確認するため

ヒアリングで聞いた情報には、重複しているものがあるかもしれません。
配置してみると、実はコンテンツが少ないページがあったりして、コンテンツを増やしたり、別のページと合わせたりする必要が出てきたりします。

導線を決めるため

ユーザーが回遊しやすいようなサイトにするために、ボタンの位置、数、全ページへのリンクがあるのかなど決めていきます。
構造の設計になるので、ここがしっかり組めていないと後々大きく変更することになりかねないので、しっかりすり合わせましょう。

フォントのルールを決めるため

意外にも、フォントが与える印象は大きく、ブランドイメージにも関わってきます。
ワイヤーフレームの段階で見出し、本文のフォントの種類と太さを決めておくとイメージがしやすいでしょう。
ワイヤーフレームの書き方には正解はなく、案件によっても様々です。
ブランドカラーを決めてワイヤーの段階から色を決める場合もあると思います。
色々な記事を見ながら、自分にあった形にしていきましょう！

XDワイヤーフレームの作り方

用意するもの

• XDをダウンロードしていない方はこちらから。
• ヒアリングシートはこちら

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

こちらの３つのルールを守ってワイヤーフレームを書くのがおすすめです。

白・黒・グレーのみを使う

あくまでも設計に集中したいので、色を入れるとフォーカスしづらくなります。

フォントの大きさを決める

最近は、ゴシック系のフォントで大きく表示させるデザインが流行っていますね。ヒアリングで聞いたイメージや参考サイトをもとに、フォントの大きさを決めておきましょう。

フォントを決める

フォントの種類は本当にたくさんあって、悩んでしまいますが、全体のイメージを左右するのでこの段階で決めておきましょう。

画面サイズを整えよう

まずは画面サイズを整えていきましょう。
おすすめは、横幅1366pxで、そのうち1080pxをコンテンツを表示する幅とするサイズです。
XDを開いたら、webのところから1366pxを選びます。

アートボードが開くので、左端をドラッグしてガイド線を引きます。
1080pxのコンテンツ幅にしたいので、両端から143pxのところに引くとぴったりです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

カラーパレットを作ろう

次に、カラーパレットを作ります。
XDに指定した色を覚えさせておけば後で繰り返し使えたり、一括で色が変えられるようになるので最初に作っておきます。
四角形のツール（ショートカット：R）を持って、適当な四角を書きます。
右側のプロパティから、塗りの色を変更します。

Command + Shift + Y　を押して、アセットを開きます。
一番上の色の横にある＋マークを押すと、選択しているオブジェクトの塗りの色が記憶されます。

これを３つ作って、
黒：文字色　白：背景が黒の場合の色　グレー：写真用
を覚えさせておきましょう。
次回から図形やテキストの色を付けたい時、これらをクリックするだけでその色を使えます。
そして、このパレットの色を変えると、パレットを使用して色付けした全ての図形に反映されます。
やっぱり#DDDDDDのグレーじゃなくて#A2A2A2のグレーにしようと思った時、全ての図形をひとつひとつ修正しなくて良いという分けです。
 

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

→XD ショートカットリストはこちら

フォントを決めよう

色の次はフォントです。
コーディングでも使うのですが、現時点ではとりあえず、
大きい見出しから順に、h1、h2、h3
本文は、pで囲むと覚えてください。
テキストツール（ショートカット：T）を持って適当なところをクリックして文字を入力します。
プロパティから文字の大きさ、太さ、フォントを選びます。
色は先ほど登録した黒にしたいので、アセットの黒をクリックして色を適用します。
このフォントスタイルを覚えさせたいので、これもアセットから登録します。
同じように、h2、h3、pを以下のように設定して、アセットに登録してみましょう。

• h1：50px　黒　好きなフォント
• H2：36px　黒　好きなフォント
• H3：20px　黒　好きなフォント
• P：16px　黒　好きなフォント

コンポーネントを使おう

XDでは、コンポーネントを使うとさらに効率よくワイヤーフレームを作ることができます。
コンポーネントは、何度も使うパーツを覚えていてくれて、使いたい時にすぐに使えるライブラリみたいなものです。

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

 
四角形とテキスト、線（ショートカット：L）を使って、このようなボタンと写真のパーツを作ってみましょう。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

パーツができたら、パーツを構成している全ての要素を選択します。
該当の範囲をドラッグで囲うか、Shiftを押しながら全ての要素をクリックしていきます。
アセットパネルのコンポーネントの横の＋をクリックすると、そのパーツが記憶されます。
先ほど作った見出しも、同じようにコンポーネントとして登録すると便利です。

パーツを組み合わせてワイヤーフレームを作ろう

登録した色、フォント、パーツを組み合わせながら、ヒアリングシートをもとにワイヤーフレームを描いてみましょう！
コンポーネントを使う時は、使いたいコンポーネントをアートボードにドラッグするだけでOKです。
コンポーネントは、最初に登録したものが”マスターコンポーネント”とされます。
このマスターコンポーネントの「色」「フォント」「大きさ」などを変更すると、そのコンポーネント全てがマスターコンポーネントと同じように変化します。

便利なテンプレートを組み合わせる

上記のようなコンポーネントが作られたXDのテンプレートファイルが、無料/有料でたくさん出回っています。
→XD日本語テンプレート
これを利用するのも良いですね！

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

前回のレッスン↓

The post 完全初心者OK！XDを使ったワイヤーフレームの書き方 first appeared on Linksbase.

アン

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

【無料配布】ヒアリングシートテンプレ

Yukinoです。 勿体ぶらずにまずはこちら。 ヒアリングシートテンプレ Googleのスプレッドシートになってるので、ファイルをコピーしてお使いください。 シート1〜4に分かれていることを確認してくださいね。

なぜヒアリングシートが必要なのか？

ヒアリングシートとは、クライアントの要望や現状の問題点、サイトの目的などを洗い出すための質問リストです。 このヒアリングシートを元に、戦略的にウェブサイトを作っていきます。

思い込みやイメージは人によって全然ちがう！

クライアントと制作サイドが同じ方向に向かって行けるようにするのがヒアリングシートの役割です。 例えば、ターゲットが30代女性だとしても、クライアントが思っているターゲット層とデザイナーが思う30代女性のイメージは違っています。 より詳しくクライアントのビジネスを知る、イメージを具現化する為に、ヒアリングシートを活用してください。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

シート1 目的を明確にする

テンプレのシート1では、 * 目的を決め * デザインイメージの好き嫌い * コンテンツの書き出し を行います。 リニューアルなのか？LPなのか？

• なにを売りたいのか？
• なにを伝えたいのか？

プロジェクトのコアとなる目的を決めましょう。 その目的に沿って、どんなイメージで、どんな色使いで、どんなコンテンツが必要なのか書き出していきます。

シート2 ターゲットを明確にする

シート2はペルソナシートです。 ペルソナをしっかりイメージすることで、制作側　サイドとクライアントサイドのイメージのすり合わせがより明確になります。 ペルソナについてはこちら。 https://linksbase.net/marketing/what-is-persona/

シート3 強み・アピールポイントを明確にする

シート3はうちのすごいとこシートです。 ペルソナでイメージした人物に対して、営業をかけるイメージで、「うちのここがすごい！」とアピールしてみます。 ウェブサイトが優秀なセールスマンになれるように、セールストークを作っているイメージです。

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

すごいとこシートから見出しがつくれる

シートにも記載していますが、30文字が入る列幅になっていて、狙うキーワードをできるだけ入れてもらうようになっています。 これには2つ理由があります。

1. 見出しをつくる
2. SEOに強くする

まず、「キャッチフレーズ」がh1として使えます。 そして、「提供しているサービス・商品が良い理由」がh2として使えます。 サイトのテキストを考えるのはクライアントサイドのことが多いと思いますが、要点がまとまらないことが多いです。 情熱をもってビジネスしているが故、「これも伝えたい」「これも載せたい」というふうになりがちです。 適切な見出しをつけないと、伝えたいことがまとまりまらないので、短文で的確な要素を盛り込むためにこのうちのすごいとこシートが役立ちます！ サイトに訪れるお客様にとって有益な情報が適切に掲載されていないと、いくらデザインがかっこよくても意味がないのです。 そして、「短文で適切な見出し」が書けると、SEOにも貢献できます。 検索エンジンが検索されたキーワード(=ユーザーが困っていること)に適切に答えているサイトを上位表示するからです。

シート4 必要な情報が集まるポイントにする

シート4は基礎情報です。 プロジェクトに関する基本的な情報などを記入していきます。 写真やロゴデータのやりとりなどはGoogleドライブを使うなどするとスムーズです。

クライアントと確認しよう

ヒアリングシートの記入をしてもらったら、ミーティングをして掘り下げていきます。
遠隔であっても、ビデオ会議などを利用して一度話す機会を持ちましょう。
あとから振り出しに戻らなくて済むように、ここでしっかりと基礎固めをするのが目的です。
 

アン

このテンプレがあれば問い合わせがきたらすぐ対応できそう！

Yukino

Yukino 前回ご紹介した最強WPテーマ、Diviの購入からインストールまでの手順をご紹介します。

もっとWebデザインを学びたい方はこちら

ロードマップ目次↓

次回のレッスン↓

The post ウェブデザインになぜヒアリングシートが必要？テンプレ無料配布します！ first appeared on Linksbase.