このページは で作られています。

で作られています。

専門知識不要で本格的なウェブサイトを作成できる! 無料で試してみる 無料で試してみる


セッション8


最後のセッションになります。
ホームページを見ると、パソコンの画面で見た時とスマホの画面で見た時、iPadの画面で見た時、デザインが異なっていると思います。これを「レスポンシブ対応」と言います。ユーザーが見る画面サイズに合わせて、ページのデザインを最適化されている状態のことです。
今回はスマホの画面で見た時のデザインを作っていきます。ほとんどのお仕事では先にパソコン画面のデザインを作って、お客様の合意が取れてから、スマホの画面のデザインを作っていきます。

スマホの画面以外にもホームページのデザインを完成させるためにはいくつかの要素があります。
・スマホのハンバーガーメニューの中
・ボタンなどのアニメーション
・ヘッダーの動き
・OGP画像
・ファビコン
鹿間の会社ではこちらを全て作成しています。

スマホの画面のデザインを作ってみよう

作り方
①パソコンの方で使った参考をスマホサイズにした状態でスクリーンショットを撮ります。使った参考は何個もあるはずなので、全てスクリーンショットを撮ります。
いつも通りこちらのスクリーンショットはこちらのサイトがおすすめです。

GoFullPage

②Figmaに並べてサイズを確認しながら作成をしていきます。
スマホのサイズはW:375で作成することが多いです。

★必要があれば、サイトを自分が使っているスマホで見て、文字サイズや画像のサイズを確認しながら作ると綺麗にデザインを組めます。
★スマホだと画面の幅が小さくなるので、パソコン画面で使用した装飾や画像が入りきらないことがあります。装飾を小さくしたり、削除したりしながら臨機応変に作成していきます。

ハンバーガーメニューを作ってみよう

ハンバーガーメニューとは、サイト内の三本線(三本線以外のデザインもあります)のナビゲーションメニューで、クリックすると隠れている情報が表示される仕組みです。サイトをスマホやiPadで見た時に、右上によく見るメニューです。

デザインをするときは、ハンバーガーメニューを開いた時のデザインも合わせて作成します。全画面にメニューが出るデザインと右半分(左半分のデザインもあります)にメニューが出るデザインがあります。

ハンバーガーメニューを開いた時のデザインには必ず「×」ボタンがあり、メニューを閉じることができるような仕様になっています。

全画面にメニューが出るデザイン

右半分にメニューが出るデザイン

ボタンやタグのアニメーションをつけてみよう

ボタンやタグをホバーした時の色味や形の変化をつけてみましょう。デザインに反映させておくと同じようにエンジニアさんが動きをつけてくれます。

アニメーションの付け方は1つではありません。色々なやり方があるので、色々と試してみましょう。

ボタンの色味を変える方法
クリックするとメニューが開くプルダウンボタンを作る方法
円形に広がるアニメーションのボタンを作る方法

ヘッダーが追従する際のデザインを作ろう

サイトを見ると、ヘッダーがスクロールしても常に上部についてくるサイトとそうでないサイトがあります。サイトのコンテンツの量が少ない場合はヘッダーの追従は必要ないですが、ある程度のコンテンツの量があったり、お問い合わせをより促したいサイトなどはヘッダーを追従させます。デザイナーが判断をして、(ディレクターが判断することもあります)追従させる場合はそのデザインも作ります。

作り方は今までと一緒で、参考サイトを見ながら良いと思うデザインを参考にしながら作成します。

OGPの画像を作ろう

OGPとはFacebookやTwitter、LINEなどのSNSでシェアされた時に見られるWEBページのタイトルやイメージ画像のことです。OGPを設定すると、SNSでシェアされた時に目立ちますし、気づかれやすくなります。
OGPの画像を作成し、エンジニアさんに設定をしてもらいましょう。

[作り方]
・画像のサイズは1200px × 630pxが推奨されています。
・LINE、Twitter(Summary Card)では真ん中の正方形の箇所が表示されるので、そこに重要な情報を入れましょう。

ファビコンの画像を作ろう

ファビコンとは、Web画面のタブなどに小さく表示されるアイコンのことです。通常はその会社のロゴを設定します。正方形で作成すればサイズはどのサイズでもOKです。画像が荒くならないように少し大きめ(300px程度)で作成しています。

最後に…

みなさまへ
セッション1〜8まで本当にお疲れ様でした。
家事や育児、お仕事など、忙しい中で取り組まれていて本当に素晴らしかったと思いますし、私もより一層頑張ろうと思えました。ありがとうございました。
デザインはここからが本番です🔥何度も作っては失敗して作っては失敗してを繰り返して上達していきます。これからも皆さんと一緒に成長して行けたら嬉しいです!
これからもよろしくお願い致します。