第3回｜【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方

サイト制作は各パーツの組み合わせでできています。まずはボタン。

ページ内にあるボタンは、ぱっと見て押せるものだとわかる必要があります。いくら素敵なボタンを制作しても、ページ内で埋もれてしまっては意味がありません。

これを「押せる感」といいますが、スキューモフィック（現実にあるボタンに似せる）に攻める、フラットデザインでデフォルメして攻める方法があります。

一つボタンができたら、次は複数。ナビゲーションは押せるボタンが並んだ物のことです。シンプルでスタイリッシュ、なおかつ「押せる感」のあるナビゲーション制作の手法を学びましょう。

スマホサイトやスマホアプリはデザイナーの作ったカンプを元にコーダーさんがcss3で再現する事ができます。css3のドロップシャドー、グラデーション、アニメーションで動くボタンのグラフィック、フラットなテイストやゴーストボタンの作成の手法を学びます。

■受講にあたって準備するもの

Adobe Photoshop （ヴァージョンは問いません）

・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロー
ドしてください。
https://creative.adobe.com/ja/products/download/photoshop

・WindowsでもMacでもインストールできますが、メモリ（Ram）は2GM以上入って
いる事が望ましいです。

・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。
https://helpx.adobe.com/jp/photoshop.html     

▼【パーツ制作実践】の全4回授業です。4回を通してWebサイト制作に必要な技術を身につけることができます。

・押せる感のあるナビゲーションボタンの作り方
・テイスト別ナビゲーションボタンの作り方
・テイスト別サイトトップ画像の作り方
・パーツを組み立てる！ランディングページの作り方