Webサイト制作において、大切なのがデザインです。
デザインによってPV数などが大きく変動します。
ターゲットとなるユーザーの属性やサイトを運営する目的によって最適なWebサイトのデザインが違います。
金融機関などのホームページは誠実や信頼をアピールするために、重厚感のあるデザインです。
IT企業やベンチャー企業などは、遊び心のある奇抜なデザインを採用している会社もあります。
今回は、様々なWebサイトデザインとデザインで役に立つツールを紹介します。
「変わったWebサイトのデザインを知りたい」、「Webサイトのデザインで役に立つツールを知りたい」という人は、ぜひ参考にしてください。
参考になるデザインまとめサイト
参考になるWebサイトデザインまとめているサイトを紹介します。
「とにかく色々なデザインを見たい」という人はこのようなサイトから置きにするのデザインを探してみてください。
MUUUUU.ORG
シンプルで見やすさをコンセプトにしたサイトです。
サイトのトップ画像とURLリンクだけが記載されていおり、デザインでかに集中して閲覧することができます。
カテゴリー別で見ることも可能です。
公式サイト：http://muuuuu.org/category/sitetype/ec
straightline bookmark
黒を基調としたデザインになっており、海外風のデザインを採用しているサイトを中心に紹介しています。
アカウントを作成すると、お気に入りのサイトをブックマークすることが可能です。
公式サイト：http://bm.straightline.jp/
I/O 3000
サイドバーなどがなく、ヘッター、フッター、コンテンツだけで構成されているので、とても見やすいのが特徴です。
更新率も高く、新しいサイトが定期的に追加されるので、おすすめです。
公式サイト：https://io3000.com/
cart craze
全て英語表記になり、海外のECサイトだけをまとめたサイトです。
ECサイトを運営している人は、ぜひ参考にしてください。
Webサイトの紹介だけでなく、役に立つチップスなども紹介しています。
PSDテンプレート・アイコンなども無料提供されているので、利用してみてはいかがでしょうか。
公式サイト：http://cartcraze.com/
ネットショップギャラリー
国内のECサイトだけを掲載しているサイトです。
様々なデーマでジャンル分されており、業種・構築方法・雰囲気・テーマカラー・地域・レイアウトから選ぶことができます。
自分の参考にしたいジャンルでサイトを探せるのがメリットです。
ページの下部にあるネットショップの運営方法・サイトデザインを解説している本が掲載されており、こちらも参考にできます。
公式サイト：http://ec.ysig.jp/
bookma! v3
ヘッダーに可愛いゴリラがデザインされており、使いやすく遊び心のあるWebサイトです。
リージョン・カラー・バックグランドカラー・テイスト・カテゴリーから選ぶことができます。
自分が気に入っているサイトや自作のサイトを掲載できるのでPR媒体として使用することも可能です。
公式サイト：https://bookma.org/
81-web.com
日本のサイトに限定したまとめサイトです。
日本ならである細部まで作り込まれたデザインを見ることができます。
公式サイト：http://81-web.com/
イケサイ
こちらのサイトも日本のサイトだけに限定したサイトです。
細かくカテゴリー分されているのが特徴。
頻繁に更新されており、お気に入りサイトを掲載してもらえるように申請することも可能です。
公式サイト：https://www.ikesai.com/cat/ec/
ズロック
管理人が面白いと感じたWebサイトだけを紹介しています。
厳選しているため、紹介しているWebサイトの数は少ないですが、効率的におしゃれなWebサイトを探せるのがメリットです。
ジャンル分けはされていませんが、ECサイト、飲食店サイト、コーポレートサイトなど様々なサイトを紹介しています。
公式サイト：http://www.zzrock.net/archives/category/sort/ec
参考になるデザイン一覧
次は、参考になるWebサイトデザインを個別で紹介します。
Airbnb
TOPページの中央部分にはキャッチコピーと検索ボックスが設置されています。
シンプルなデザインですが、一番重要になるTOPページの一番目につくところは情報を絞っているのが特徴です。
あえて情報を少なくすることで、1点に注意や意識を向けさせるようにしています。
スクロールすると各国のユニークな宿泊先が紹介されています。
公式サイト：https://www.airbnb.jp/
Apple
美しいデザインと聞いて多くの人が連想するのは、Apppleではないでしょうか。
ユーザーの使いやすさを徹底しているのは製品だけではありません。
Appleの公式サイトのデザインも徹底してデザイン性を追求しています。
商品全体を写すために大きく表示された画像、必要な機能は最小限にとどめており、無駄なエフェクトは一切ありません。
1カラムで構成されており、視線が散らばらないように設計されています。
他にはない、Webデザインを学びたい人におすすめなのが、Appleの公式サイトです。
公式サイト：https://www.apple.com/jp/
mamoria
デイサービスを提供している会社のWebサイトです。
このサイトを利用するユーザーの年齢は、パソコンの使い方に不慣れな人が多くいます。
そのため、年配の人でも使いやすいように設計されているのが特徴です。
例えば、文字の大きさをボタン1つで変えられるようにサイトの右上に表示の大きさを変更できるボタンを設置してます。
これは、目の悪い年配者のためにこの機能を搭載しています。
他にも、全国各地の営業所を検索する機能も直感的に操作できるように配慮されているのも参考になる点です。
今後は、ネットリテラシーの高い高齢者の人も増えるので、文字の大きさを変えられるような年配者に配慮されたサイト設計が必要です。
サイトの構成も直感的に操作できるように、わかりやすくしましょう。
公式サイト：https://mamoria.jp/
甲陽物流
今まで紹介したWebサイトは全てBtoCです。
「甲陽物流」は、BtoBのWebサイトになり、そのようなサイトを制作するときに参考にしてください。
BtoBのWebサイトは、カラフルなデザインになっており、明るくポップな見た目になっています。
優れているのは、デザインだけではありません。
「お客様の声」というページを設けており、改善してほしいところを募集しています。
問い合わせフォームは、コーポレートサイトに必ず設けられていますが、顧客のクレームや要望が反映されている企業は数少ないのが現状です。
しかし、このWebサイトでは問い合わせのページに顧客から届いた要望の一部を掲載しています。
また、要望を掲載しているたけでなく、届いた要望に対する対応事例も掲載しているのが特徴です。
このようにすることで、「要望に応えてくれる会社」という印象を与えることができます。
公式サイトhttp://www.koyo-logistics.jp/
Webデザインで役立つツール
ここまでは参考になるWebデザインを紹介しました。
次は、Webサイトを制作やデザインで役立つツールを紹介します。
Photoshop
Photoshopは、画像編集するツールです。
風景・人物・動物・絵など画像であればどのようなモノでも加工することが可能。
機能は、画像の明るさ・大きさ・鮮やかさ・合成など様々なことができます。
実際に使用する機能について説明します。
まず、サイドバーに表示されているアイコンについて説明しましょう。
移動ツール
画像や文字を移動させることが可能です。
必ず使用ツールなので機能やアイコンの配置を覚えておきましょう。
使い方はとても簡単で、動かしたい画像や文字をクリックして選択します。
選択した画像や文字を動かしたい方向にドラックすれば移動ができます。
移動ツールのアイコンを1回ずつクリックしなくても、Windowsの場合はCtrl押しながらドラッグすれば移動可能です。
(Macの場合は、Command押しながらドラックすれば移動可能です。)
なげなわツール
なげなわツールは、選択範囲を自由に描くことができます。
画像の中にある、建物・動物・人物など複雑な形状をした被写体を選択することが可能です。
画像の一部分だけを切り抜きたいときに使用しましょう。
切り抜きツール
切り抜きツールは、なげなわツールと同じように画像を切り抜くことが可能です。
なげなわツールと切り抜きツールの違いは切り抜く部分になります。
・なげなわツール・・・切り抜く部分を自由に選択できる
・切り抜きツール・・・切り抜く部分を自由に選択できない
切り抜きツールは、切り抜く部分を選択しない代わりに、簡単に切り抜くことが可能です。
なので、画像サイズを変更するときなどに使用すると便利です。
なげなわツールと切り抜きツールの違いも覚えておきましょう。
パッチツール
パッチツールは、画像の一部分を消すときに使用するツールです。
インスタグラマーの人もよく使用するツールになります。
写真に写った通行人・ゴミなど意図しないモノが写り込んでしまった場合は、このツールを使用して消すようにしましょう。
消した部分は、消した周りの部分の色合い・明るさを読み取り、周りと同化するようにつくられています。
なので、顔のシワやホクロも自然に消すことができるので、女性の顔を少しでも美しくしたい場合は、このツールを使用するのがおすすめです。
コピースタンプツール
コピースタンプツールは、画像の一部分を増やすことや消すことができます。
コピースタンプツールは、パッチツールとの違いは画像の一部分を増やすことができるところです。
・パッチツール・・・選択した部分を消すことができる
・コピースタンプツール・・・選択した部分を増やす、消すことができる
コピースタンプツールはAltを押しながらクリックすることで選択した部分を増やす・消すことが可能です。
このツールも消した部分は、消した周りの部分の色合い・明るさを読み取り、周りと同化するようにつくられています。
こちらの機能の方が比較的簡単に使用できるので、初心者の人におすすめ。
消しゴムツール
消しゴムツールは、画像の一部分を消すことに特化したツールです。
このツールは、消した部分を透明にしたり、指定した色に変えることができます。
このツールで消した部分は、透明もしくは指定した色になるのが、パッチツールとコピースタンプツールの違いです。
「消せる」という機能は同じでも、ツールによって詳細な部分は違うので注意しましょう。
| ツールの名称 | 機能の特徴 |
|---|---|
| パッチツール | 消した部分が周りと同化した不自然にならない |
| コピースタンプツール | 消した部分が周りと同化した不自然にならない |
| 消しゴムツール | 消した部分が透明もしくは指定した色になる |
ぼかしツール
ツールの名称にもあるように、ぼかすことができるツールです。
ぼかしたい部分を選択するだけで、選択した部分をぼかすことができます。
ペンツール
ペンツールは、直線や曲線を描くことができるツールです。
ペンツールという名前ですが、ペンのように自由に描くことはできません。
このツールで囲った部分を切り抜くこともできます。
パスコンポーネント選択ツール
パスコンポーネント選択ツールは、選択中のパスだけを自由に移動させることが可能です。
また、パスコンポーネント選択ツールと似たような機能を持つ「パス選択ツール」があります。
パス選択ツールは、選択中のパスだけでなく、ペンツールを使って作成したアンカーポイントも移動させることができます。
パス選択ツールの方が汎用性が高いので様々な場面で使用できるのが特徴です。
手のひらツール
クリックしたまま動かすことで、表示部分を変更できます。
長方形選択ツール
長方形に選択することができるツールです。
コノツールを使用することで、選択した部分を切り抜くことや変形を加えることが可能になります。
自動選択ツール
画像から人物・モノ・動物などを自動で選択することができるツールです。
このツールを使用することで簡単に背景などを切り抜くことができます。
切り抜く機能は他のツールでも可能ですが、自動選択ツールは一番簡単に切り抜くことができます。
スポイトツール
スポイトツールは、画像で使用されている色を調べることができます。
使い方は、スポイトツールのアイコンをクリックして、調べたい色をクリックすることでその色が表示されカラーコードも確認可能です。
もちろん、調べた色を使用することもできます。
ブラシツール
自由に線を描くことができるツールです。
線の太さや色なども自由に変更できます。
汎用性の高いツールなので、使える機会が多いので覚えておいてください。
ヒストリーツール
ヒストリーツールは、画像の一部分だけを過去の編集に戻すことが可能です。
加工や編集を元に戻したい部分を選択することで、編集前の状態に戻すことができます。
塗りつぶしツール
指定した色に塗りつぶすことができるツールです。
背景色を変えたいときに使用するのがおすすめ。
覆い焼きツール
選択した部分の明るさを変えることができるツールです。
覆い焼きツールは、選択した部分を明るくすることができます。
覆い焼きツールと反対の機能がある焼き込みツールは、選択した部分を暗くすることが可能です。
画像の一部分だけの明るさを調整したいときに使用しましょう。
文字ツール
Photoshopの中でも、特に使用率の高いツールといえば文字ツールです。
文字ツールは、画像の中に文字を入れることができます。
デフォルトの設定では、横書きの設定になっていますが、縦書きにすることも可能です。
設定を変える手順としては、文字ツールのアイコンを右クリックします。
図形ツール
このツールは、様々な形の図形を描くことができるツールです。
描ける図形は、長方形ツール・角丸長方形ツール・楕円形ツール・多角形ツール・ラインツールなどになります。
それに加え、カスタムシェイプツールがあり、星型・矢印・ハート型など色々な形の図形を描くことが可能です。
ズームツール
画像をズームできるツールです。
細かいところの修正をするさいには必ず必要になります。
Photoshopを契約したい人は下記のURLをクリックしてください。
URL：https://www.adobe.com/jp/products/photoshop.html
Illustrator
Illustratorは、Photoshopと同じで、Adobeという会社から発売されているソフトです。
このツールの目的は、イラストを制作することになります。
IllustratorとPhotoshopの違いを説明します。
写真とイラスト
IllustratorとPhotoshopは、扱える得意なデータに違いあります。
・Illustrator・・イラストデータ(ベクトル画像)を扱うのが得意
・Photoshop・・画像(ビットマップ画像)を扱うのが得意。
ベクトル画像は、拡大縮小することで画質が変わります。
対照的に、ビットマップ画像は拡大縮小しても画質が変化することがありません。
絵の具で描いたようなアート
Photoshopでは、Illustratorにはない様々なブラシを使うことができます。
なので、実際の筆を使って描いたようなアート作品をPhotoshopで制作することが可能です。
図表
プレゼンテーションで使用する資料などを作成するのは、Illustratorの方が向いています。
理由は、Illustratorは、図形などを簡単に制作できるからです。
ロゴ・アイコン制作
ロゴ・アイコンを制作するのにおすすめなのが、Illustratorです。
Illustratorは、均一な大きさの図形や図形を重ねのが得意。
立体的な図形
立体的な図形を制作のは、Photoshopが向いています。
Photoshopの方が、よりリアルな影をつけることができるからです。
写真加工
写真加工は、Photoshopの得意分野です。
簡易的な写真を加工はIllustratorでも可能ですが、少し凝った写真加工はできません。
Illustratorを契約したい人は下記のURLをクリックしてください。
URL：https://www.adobe.com/jp/products/illustrator.html
Webサイト・アプリのイメージ制作
Webデザインのレイアウト・イメージ制作は、PhotoshopとIllustrator両方のツールで制作することが可能です。
Adobe製品を契約する
Adobe製品は1回の買い切りタイプではりません。
月額制なので、月々支払いが必要になり、契約する必要があります。
学生や教職員の人は割安価格で購入することが可能です。
一般の人は、Photoshopが月額980円、Illustratorが月額1,280円にです。
また、コンプリートプランがあり、Adobe製品全てを使用できるプランもあります。
Adobe製品を3つ以上使用する場合は、コンプリートプランがおトクです。
Adobe製品のプランを見たい人は下記のURLをクリックしてください。
URL：https://www.adobe.com/jp/creativecloud/plans.html?promoid=P3KMQYMW&mv=other
まとめ
いかがでしたか？気になるデザインや役に立つツールはありましたか？
Adobe社の製品はプロも使用するツールです。
操作は難しいですが、使いこなすことで高品質な製品をつくることができます。
また、Webサイトのデザインで悩んでいる人におすすめなのが、公開されているWebサイトを見ることです。
おしゃれなデザインをたくさん見て、参考にするのが、力を身につける最短のルートになります。
今回、紹介したWebサイトなど、ぜひ参考にしてください。