今回は、ノーコードツールSTUDIOでおしゃれなファーストビューの作り方を紹介します。
「STUDIOでファーストビューを作りたい!」
「でも自分にはセンスがないし、うまく作れないよね。。。」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、デザインのセンスが全くない方でも、クオリティーが高いファーストビューを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでおしゃれなファーストビューの作り方を紹介
![](https://design-yandy.com/wp-content/uploads/2021/02/ddd5355177914edee8baa6810852067f.jpg)
それでは、ノーコードツールSTUDIOでオシャレなファーストビューの作り方を紹介します。
今回は、以下のようなファーストビューを作成したいと思います。
6STEPで解説していきます。
①管理画面にアクセス
②文字の編集
③写真の変更
④写真のサイズの調整
⑤マージンの調整
⑥ライフプレビューで確認
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① 管理画面にアクセス
まずは、サイトを作成するために管理画面にアクセスします。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_00_22_03.静止画002-1024x576.jpg)
「新しいプロジェクト」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_00_23_21.静止画003-1024x576.jpg)
そして、今回はテンプレートを利用してファーストビューを作成します。
テンプレートがたくさんあって迷ってしまうのですが、今回は「THE COFFEE」を利用していきたいと思います。
「このテンプレートを選択」をクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_00_43_17.静止画004-1024x576.jpg)
そして、「プロジェクト名」を入力します。お好きな名前をつけましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_00_49_05.静止画005-1024x576.jpg)
今回、私は、「STUDIO COFFEE」と入力し、「作成」ボタンを押します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_00_57_13.静止画006-1024x576.jpg)
すると、管理画面になりました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_04_11.静止画007-1024x576.jpg)
編集をする前に重要な考え方
まず、編集をする前に、編集をする際の大事な考え方をご紹介します。
それは、各要素のレイヤーを把握することです。
たとえば、「THE COFFEE」の文字の上で2回クリックして下さい。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_23_17.静止画008-1024x576.jpg)
すると、headerというボックスの中に、文字が3つ入っていることがわかると思います。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_25_20.静止画009-1024x576.jpg)
どのような構造になっているかをレイヤーパネルで確認してみましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_43_15.静止画010-1024x576.jpg)
編集したいこちらの3つの文字の場所を確認してみると、こちらが編集したい文字のタグとなっております。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_52_00.静止画011-1024x576.jpg)
なぜ、すぐにわかるかと言いますと、この名称のところに、「text」や「title」と書かれているからです。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_01_57_17.静止画012-1024x576.jpg)
文字は、この「h」タグや「p」タグで表現されますので、覚えるようにしておきましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_02_05_04.静止画013-1024x576.jpg)
今回編集する3つの文字のタグについて見てみると、「div」タグの中にある「header」タグの中にあることがわかります。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_02_19_09.静止画015-1024x576.jpg)
そのため、文字を編集するためには、3回クリックをして文字を選択する必要がありますので、ご注意ください。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_02_22_12.静止画014-1024x576.jpg)
このように、編集をしていく中で、各要素のレイヤー構造を把握することは、とても重要なことですので、しっかりと意識していきましょう。
②文字の編集
さて、早速、この3つの文字を編集していきます。
まず、1番上の文字である<P>タグをクリックして、編集したい文字を選択します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_07_06.静止画016-1024x576.jpg)
ここで、「月4,980円であなたにぴったりなコーヒー豆が届く月額制サービス」の文言の上でダブルクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_15_02.静止画017-1024x576.jpg)
そして、「280円〜あなたにぴったりなコーヒーをセレクトします!」という文言に変更します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_40_15.静止画018-1024x576.jpg)
続いて、真ん中の文字の<h1>タグを選択します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_51_22.静止画019-1024x576.jpg)
そして、「THE COFFEE」の上でダブルクリックしましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_54_21.静止画020-1024x576.jpg)
文字が見えないので、一旦レイヤーパネルを閉じます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_03_56_09.静止画021-1024x576.jpg)
「STUDIO COFFEE」と変更したいのですが、文字が長くなるので、今回は「ST COFFEE」と入力します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_06_01.静止画022-1024x576.jpg)
次に、「本格的なお家コーヒーで人生をもっと豊かに。」の文字を変更します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_11_03.静止画023-1024x576.jpg)
同じように、レイヤーパネルを開き、1番下の<P>タグを選択します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_16_04.静止画024-1024x576.jpg)
そして、「贅沢なひとときをみなさまに。」と入力します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_33_17.静止画025-1024x576.jpg)
これで、ファーストビューの文字の変更が完了しました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_40_04.静止画026-1024x576.jpg)
③ 写真の変更
次に、以下の写真を変更していきます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_47_18.静止画027-1024x576.jpg)
まずは、写真のレイヤーを確かめてみましょう。
レイヤーパネルを開くと、<img>タグがありますが、こちらが写真のタグとなっております。
こちらの<img>タグは、divタグの下にありますので、写真の上で2回クリックすると選択できます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_04_57_17.静止画028-1024x576.jpg)
実際にレイヤーパネルを閉じてから選択してみましょう。
2回クリックをすると、写真のタグを選択できました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_16_09.静止画029-1024x576.jpg)
そして、選択した状態で、写真の左上にある写真のマークをクリックすると、変更できます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_28_09.静止画030-1024x576.jpg)
ここで写真を自由に選択しましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_30_22.静止画031-1024x576.jpg)
ちなみに、「カメラのマーク」の右側の欄にキーワードを入力することで、関連する写真を探すことができます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_40_20.静止画032-1024x576.jpg)
今回は、「coffee」に関連する写真を探してみます。
ここに「coffee」と入力をして、「enter」を押します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_45_13.静止画033-1024x576.jpg)
すると、「coffee」に関連する写真がたくさん表示されます。
今回は以下の写真を選択します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_05_56_01.静止画034-1024x576.jpg)
このように写真が変更されました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_06_04_05.静止画035-1024x576.jpg)
④ 写真のサイズの調整
次に、このままだと、文字と写真の余白が気になるので、写真のサイズを調整します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_06_09_18.静止画036-1024x576.jpg)
サイズを調整する際は、この白色の所をクリックしながら動かすことで調整できます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_06_20_23.静止画037-1024x576.jpg)
すると、このように縦と横の比率を保ちながら、縮小することができました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_06_38_03.静止画038-1024x576.jpg)
ただ、このままだとなんとなく写真の縦と横のバランスが悪くなっております。
そのような場合は、以下の「BOX」を選択すると、縦横比を気にせず自由に拡大や縮小ができますので、自由に大きさを変えたい場合は、「BOX」に変更して修正するようにしましょう。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_06_55_19.静止画039-1024x576.jpg)
これで、自由に写真のサイズを変更して、配置できました。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_07_05_14.静止画040-1024x576.jpg)
⑤ マージンの調整
最後に、マージンを使って、文字と写真の位置を調整します。
まず、写真を選択して、白色の所にカーサルを移動させると、オレンジ色になります。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_07_45_03.静止画041-1024x576.jpg)
この時に、左クリックを押しながら、上下に動かすことで、写真と文字の位置を調整することができます。
今回は、このくらいの距離に調整しておきます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_08_03_04.静止画043-1024x576.jpg)
ちなみに、マージンの調整は、上部のスタイルバーからも変更できます。
私と同じ間隔にしたい場合は、「50」に設定してください。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_08_12_20.静止画045-1024x576.jpg)
これで、ファーストビューの完成です。
⑥ライフプレビューで確認
最後に、作成したファーストビューをライフプレビューで確認してみましょう。
右上にある「ライフプレビュー」を押します。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_08_27_03.静止画046-1024x576.jpg)
そして、「スタート」をクリックします。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_08_29_23.静止画047-1024x576.jpg)
このURLをクリックすると、今作ったファーストビューを確認することができます。
![](https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.00_08_33_10.静止画048-1024x576.jpg)
テンプレートを使うとこんなに簡単にクオリティーの高いファーストビューを作ることができました。
まとめ
![](https://design-yandy.com/wp-content/uploads/2021/02/shutterstock_188488964-e1554528120562-1024x714.jpg)
今回の動画では、STUDIOで簡単におしゃれなファーストビューの作り方をご紹介しました。
ファーストビューを見たユーザーは、3秒でWEBサイトが自分にとって必要かを判断していると言われております。
そのため、ファーストビューは、サイトの中で1番重要になってきますので、ぜひ色んなファーストビューを作って、スキルを高めて下さい。
他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)