webデザイン・UIデザイン・UXデザインで参考になる情報まとめ

HTML/CSSを使ってwebサイトを作るにしても、WIXやJimdoなどのホームページ制作ツールを使って作成するにしても、どちらにしろ必要なデザインの力。

ここでは、webデザイン・UIデザイン・UXデザインで参考になる情報やサイトを共有していく。

そもそもwebデザイン・UI・UXデザインとは

webデザインとは？

webデザインとは、webサイトの見た目に関する制作（レイアウトや素材作成・配置など）を行うこと。

例えば下記のような点はwebデザインの領域に入る。

• どこにどんな情報を配置すれば見る人は分かりやすいかを考える
• webサイト全体の文字の形（フォント）や色を合わせて全体の雰囲気作りをする
• 写真選び
• 文字や写真に動きをつける

などが挙げられる。

UIデザインとは

UIデザインの「ユーザーインターフェース」つまり人間と機械の接点におけるデザインになる。

つまり人間が機械を操作するときのデザインや、機械が結果を表示するときのデザインがUIデザインとなる。例えば、

• 焼肉屋さん、お寿司屋さん、ショッピングモール、銀行のATM、車のカーナビなどのタッチパネル
• アプリのデザイン

などがある。

UIデザインの焦点となるのは、いかにスムーズに使いやすいデザインを作れるか。

レストランのタッチパネルでも、どこが注文ボタンなのか、どこで店員さんを呼ぶボタンなのか分からなかったらお客さんはイライラするだろう。

例えば買い物アプリでも、どこで商品を検索できるのか分かりづらかったら、そのアプリを使わなくなる。

なのでUIデザインの焦点としては、

• ユーザーが操作するパーツ（ボタン・検索部分・スライドボタンなど）の色や大きさ
• 表示される情報の位置や動き

が挙げられる。

もちろんwebデザインを考えるときも、ボタンの位置や、どこにどんな情報をおくかを考えるので、webデザインとUIデザインはかぶるところもある。

あえて違いを考えるならば、webデザインは装飾に、UIデザインは機能に焦点を当てているというイメージで考えると分かりやすい。

UXデザインとは

UXデザインとは、「ユーザーエクスペリエンス」という意味で、画面の使いやすさだけではなく、そのサービスを通じて顧客の体験をデザインすることにある。

「体験をデザイン」する事例を挙げる。

• LINE：チャット方式で、一つの画面で会話の記録を追え、複数人でもチャットしあえるアプリデザインと機能→よりリアルな会話に近い体験をデザイン
• クックパッド：料理の写真だけを自動で抽出し、毎日の料理記録を作成してくれる「料理きろく」という機能→ユーザーに手間をかけずに栄養管理や献立の作成を可能にさせるデザイン
• コカコーラのスマホアプリ：スマホと自販機を連携させ、アプリ内でスタンプを15個貯めると好きなドリンクがプレゼントされる体験をデザイン

参照：わかりにくい「UX設計」の理解を深めるサービス事例11選

ウェブデザインや、UIのデザインを含めて、最終的に顧客がどういう体験をするのかというところまでデザインするのがUXデザインとなる。

webデザインをする際の使用ツール

webデザインを考える場合に使うツールを紹介する。

HTML・CSSでwebサイトを制作する場合

HTML・CSSでwebサイト制作する場合は、まず「デザインカンプ」と呼ばれる、webデザインの完成図を先に作成する。

コーディングはこのデザインカンプを元にして行われる。

このデザインカンプを作成する際には、以下のようなツールが使われることが多い。

• Photoshop
• Illustrator
• Adobe Xd
• Sketch
• Figma

ホームページ制作ツールでwebサイトを制作する場合

WixやJimdoなど、ホームページ作成ツールでWebサイトを作成する場合は、上記のようなツールはいらない。

ホームページ作成ツールでは、マウス操作でデザインを作成した後、コーディングすることなくそのままWebサイトを公開できる。

作成ツール自体が上記のphotoshopのような役割を果たすので、特に必要なツールはいらない。

ただ画像自体を編集したかったり、オリジナルのイラストが欲しいといった場合は、photoshopやillustratorは必要となる。

webデザインを参考にする際に便利なギャラリーサイト

webデザインを作成する際は、やはりプロが作ったサイトを見ておくととても勉強になる。

他社事例としてとても参考になるギャラリーサイトについて下記で紹介。

素材サイト

良いウェブサイトを作るには、写真、イラストなど良い素材が不可欠だ。

下記に素材をダウンロードできるウェブサイトのリストをまとめた。

無料のサイトもあれば有料のサイトもある。著作権などの部分なども要確認。

写真

視覚的効果を高めてくれる画像。

現在は多種多様な画像素材サイトがあるので、サイトを差別化させるのにも役立っている。

下記に画像素材サイトをまとめた。

イラスト

ウェブサイトを作る上で、イラストは視覚情報でメッセージを伝えやすくしてくれる。

また、アイコンよりも目立つので、ウェブサイト全体のテイストを作り上げる上でもイラストは重要な役割を果たす。

しかし1から自分でイラストを作るとなるとかなりの労力がかかってしまう。

そんな時にイラスト素材サイトを利用するととても便利。

商用可能な素材サイト、無料で使える素材サイトもあるので、積極的に利用したい。

イラストの素材を集めるのに便利なサイトを下記にまとめた。

アイコン

アイコンもイラストと同じく、Webサイトでメッセージを伝える上で重要な役割を果たす。

アイコンもイラストと同じく、素材サイトで集めることができる。

アイコンの素材を集めるのに便利なサイトを下記にまとめた。