おためし受講中

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

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

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

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

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

スマホサイトやスマホアプリはデザイナーの作ったカンプを元にコーダーさんが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サイト制作に必要な技術を身につけることができます。

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

 

学生代表

  • 鈴木 顕照

    鈴木 顕照

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    01:28  (00:12 ~ )
    押せる感って一体何?
    10:00  (01:40 ~ )
    サイトは押されてなんぼ
    10:06  (11:40 ~ )
    ボタン制作実演
    01:14  (21:46 ~ )
    レイヤーの中にあるBLUE BUTTONSを使って押せる感を出そう
    03:49  (23:00 ~ )
    BIG Button→Over画像を選択して、配置してみよう
    03:29  (26:49 ~ )
    Medium Buttons →Overを選択して、配置してみよう
    03:06  (30:18 ~ )
    ボタンの切り出しをやってみよう
    15:42  (33:24 ~ )
    Normalがみえてしまっている状態 →BigもMediumもNormalを非表示にしよう
    07:59  (49:06 ~ )
    コーストボタンを作成する為に、右下のフォルダのアイコン(レイヤーグループ)をクリックする→新しいのができる→gbtと名前をつけよう
    01:15  (57:05 ~ )
    多角形選択ツールを長押し→長方形ツール シェイプ、塗りをなしに(赤ななめの線) 線→白線 3pt
    17:57  (58:20 ~ )
    【後半】質疑応答
    Q:PNG8とPNG24の違いは何かありますか?どちらでしても大丈夫ですか?
    01:57  (1:16:17 ~ )
    Q:CSS3で可能なボタンとは、その知識もやはり必要だと思うのですが、そんな参考になるサイトはありますか?
    02:35  (1:18:14 ~ )
    Q:キーボード操作の考慮に:hover擬似クラスへ:focus擬似クラスを併用することが殆ど啓発されていませんが、どのように考えますか?
    00:55  (1:20:49 ~ )
    Q:フラットデザインのスマホサイトはどうやってボタンのおせる感を出すと良いのでしょうか?
    01:02  (1:21:44 ~ )
    Q:ラスタライズの件ですが、イラストレーターでラスタライズ済みのものをフォトショップで使っても問題ないでしょうか?
    02:35  (1:22:46 ~ )
    Q:CSSとCSS3の違いって何か違いはありますか?
    01:48  (1:25:21 ~ )
    Q:フォントで、小塚のような、メジャーものでも、ラスタライズした方がよいのでしょうか?
      (1:27:09 ~ )