【STUDIOの使い方④】レスポンシブ対応

【STUDIOの使い方④】レスポンシブ対応

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。

STUDIOの使い方第4弾は、レスポンシブ対応についてです。

レスポンシブ対応は、今やどのWebサイトでも必須項目となっています。STUDIOでは、簡単にレスポンシブ対応ができるので、ぜひ使い方を覚えてみてください。

また、後半では実際にWebサイトをレスポンシブ対応にする流れもご説明しています。一緒に制作して、STUDIOの操作に慣れてみてくださいね。

前回のSTUDIOの装飾に関する記事も合わせてご参照ください!

レスポンシブ対応とは

レスポンシブ対応とは、Webサイトをどんな画面サイズでも見やすいよう効率的に切り替える方法のことです。

近年は、タブレットやスマートフォンの普及により、PC以外のデバイスでもWebサイトを見るユーザーが多くなってきました。そのため、どのデバイスから見ても見やすくなるよう、Webサイトを表示させることが重要となります。

しかし、それぞれのデバイスにサイズを合わせてページを作っていてはキリがないので、1つのページで画面サイズに合わせて表示を変える方法を使います。これがレスポンシブ対応です。

Image from Gyazo

STUDIOでも、もちろんレスポンシブに対応しており、かつ簡単に表示方法を切り替えることが可能です。次の項目から詳しく見ていきましょう。

レスポンシブの対応方法

STUDIOでのレスポンシブ対応方法は非常に簡単です。基本の流れとして、

①画面サイズを変える
②各要素のサイズを画面サイズに合わせて調整する

の2点を抑えておけば、レスポンシブに対応できます。

例えばタブレットの画面サイズなら、上部に緑色の枠が表示されている状態で要素を変更すれば、タブレット版として既にレスポンシブ対応ができていることになります。また、レスポンシブとして変更した要素は、背景色が枠と同じ色になります。

Image from Gyazo

また、スマートフォンの画面サイズはオレンジ色の枠になります。

Image from Gyazo

もし、サイズの変更ではなくタブレットやスマートフォンで要素を見えない状態にしたい場合は、ボックスメニューの表示から、画面サイズごとに表示・非表示を切り替えるようにしましょう。
(このあとの実践編でも活用します!)

Image from Gyazo

なお注意点として、STUDIOでのレスポンシブ対応は、PCサイズのデザインが基本となっています。そのため、タブレットやスマートフォンのデザインを、PCのデザインから大きく変更することはできないので気をつけましょう。

実際にレスポンシブ対応のサイトを作ってみよう

それでは、実際にレスポンシブ対応を実装していきましょう!
作成するのは、クリ★スタのコーディング課題①です。
課題では、PCとスマートフォンのデザインしか用意されていないので、今回はスマートフォンのみの対応とします。

また、ヘッダーとメインビジュアルは前回までの記事で作成したものを使用します。

【完成図】
コチラをご覧ください!
( お手持ちのスマートフォンやタブレットで確認するか、検証ツールを使用して確認してみてください! )

デザインは以下の記事で配布しています。

画面サイズ375pxを選択して、Responsive mode(mobile)(枠がオレンジ色)になっていることを確認しましょう。

Image from Gyazo

②ナビゲーションメニューを非表示にする

まずはヘッダーからです。PCとスマートフォンのデザインを比べたところ、右上のナビゲーションメニューがハンバーガーメニュー(3本線のアイコン)になっています。そのため、まずはスマートフォンではナビゲーションメニューが非表示になるよう設定します。ヘッダーのナビゲーションメニューがあるボックスを選択し、ボックスメニューの「表示」からmobileのチェックを外してください。

Image from Gyazo

③ハンバーガーメニューを挿入する

非表示にできたら、ハンバーガーメニューのアイコンを挿入します。左バーメニューから「Icon」を選択し、アイコンを探してください。(検索ワードを「bar」や「menu」「navi」あたりにすると、3本線のアイコンが出てきます。)見つけたら、アイコンをドラッグ&ドロップでヘッダーの右に持ってきて、色を白にします。また、このアイコンはスマートフォンのみで表示させたいので、defaultとtabletを表示メニューから非表示にしましょう

Image from Gyazo

④ロゴとメニューの位置を調整

クリスタのロゴは左側に、アイコンは右側にそれぞれ16pxのマージンをつけて、位置を調節しましょう。ヘッダーはこれで完成です!

Image from Gyazo

⑤メインビジュアルのmobile表示を非表示にする

次にメインビジュアルです。こちらはスマートフォンサイズの画像が用意されているので、現在のメインビジュアルはスマートフォンで表示できないようにします。メインビジュアルのボックスを選択し、ボックスメニューの表示からmobileのチェックを外します

Image from Gyazo

⑥スマートフォンサイズのメインビジュアルを作る

スマートフォン用のメインビジュアルを作成します。幅100%、縦590pxの画像ボックスを用意してください。コーディング課題で配布している画像データをアップロードし、画像を挿入してください。

Image from Gyazo

⑦中央のロゴを作る

メインビジュアル中央に、横幅300px、縦100pxのボックスを作り、枠の色を白にします。このボックスの中にテキストを挿入し、色や大きさを整えてください。PCより少しサイズが小さくなっているので、それぞれ確認しながら調整していきましょう。これでメインビジュアルの完成です!

Image from Gyazo

⑦レスポンシブ対応ができているか確認

最後にスマートフォンや検証ツールなどで、レスポンシブ対応ができているか確認しましょう!

Image from Gyazo

まとめ

今回は、レスポンシブ対応ついてご紹介しました。

STUDIOでは直感的にレスポンシブ対応が可能なので、ぜひ活用していってください!

STUDIOの使い方編は以上になります。次はこれまでの総まとめとして、メインビジュアル下のAboutとServiceを一緒に作っていきましょう。

わからない点があれば、これまでの記事で復習してみてくださいね!