今回は、ノーコードツールSTUDIOでおしゃれなファーストビューの作り方を紹介します。「でも自分にはセンスがないし、うまく作れないよね。」こういった疑問や不安をこの記事を読めば、解決できます。今回ご紹介する方法を真似して頂くと、デザインのセンスが全くない方でも、クオリティーが高いファーストビューを簡単に作ることができますので、ぜひ一緒に作っていきましょう。ちなみに、この記事を書いている私は、STUDIO関連の案件を30個以上こなしてきました。多くの経験があるので、信頼担保に繋がるのかなと。まとめSTUDIOでおしゃれなファーストビューの作り方を紹介それでは、ノーコードツールSTUDIOでオシャレなファーストビューの作り方を紹介します。今回は、以下のようなファーストビューを作成したいと思います。https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.mp46STEPで解説していきます。1管理画面にアクセス2文字の編集3写真の変更4写真のサイズの調整5マージンの調整6ライフプレビューで確認また、YouTubeにて徹底解説しました。文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。管理画面にアクセスまずは、サイトを作成するために管理画面にアクセスします。「新しいプロジェクト」をクリックします。今回はテンプレートを利用してファーストビューを作成します。COFFEE」を利用していきたいと思います。「このテンプレートを選択」をクリックしましょう。「プロジェクト名」を入力します。お好きな名前をつけましょう。COFFEE」と入力し、「作成」ボタンを押します。すると、管理画面になりました。編集をする前に重要な考え方まず、編集をする前に、編集をする際の大事な考え方をご紹介します。それは、各要素のレイヤーを把握することです。COFFEE」の文字の上で2回クリックして下さい。すると、headerというボックスの中に、文字が3つ入っていることがわかると思います。どのような構造になっているかをレイヤーパネルで確認してみましょう。編集したいこちらの3つの文字の場所を確認してみると、こちらが編集したい文字のタグとなっております。わかるかと言いますと、この名称のところに、「text」や「title」と書かれているからです。文字は、この「h」タグや「p」タグで表現されますので、覚えるようにしておきましょう。今回編集する3つの文字のタグについて見てみると、「div」タグの中にある「header」タグの中にあることがわかります。そのため、文字を編集するためには、3回クリックをして文字を選択する必要がありますので、ご注意ください。このように、編集をしていく中で、各要素のレイヤー構造を把握することは、とても重要なことですので、しっかりと意識していきましょう。2文字の編集さて、早速、この3つの文字を編集していきます。1番上の文字である<P>タグをクリックして、編集したい文字を選択します。ここで、「月4,980円であなたにぴったりなコーヒー豆が届く月額制サービス」の文言の上でダブルクリックしましょう。「280円〜あなたにぴったりなコーヒーをセレクトします!」という文言に変更します。続いて、真ん中の文字の<h1>タグを選択します。COFFEE」の上でダブルクリックしましょう。文字が見えないので、一旦レイヤーパネルを閉じます。COFFEE」と入力します。次に、「本格的なお家コーヒーで人生をもっと豊かに。」の文字を変更します。同じように、レイヤーパネルを開き、1番下の<P>タグを選択します。「贅沢なひとときをみなさまに。これで、ファーストビューの文字の変更が完了しました。次に、以下の写真を変更していきます。写真のレイヤーを確かめてみましょう。レイヤーパネルを開くと、<img>タグがありますが、こちらが写真のタグとなっております。こちらの<img>タグは、divタグの下にありますので、写真の上で2回クリックすると選択できます。実際にレイヤーパネルを閉じてから選択してみましょう。2回クリックをすると、写真のタグを選択できました。選択した状態で、写真の左上にある写真のマークをクリックすると、変更できます。ここで写真を自由に選択しましょう。ちなみに、「カメラのマーク」の右側の欄にキーワードを入力することで、関連する写真を探すことができます。今回は、「coffee」に関連する写真を探してみます。ここに「coffee」と入力をして、「enter」を押します。すると、「coffee」に関連する写真がたくさん表示されます。今回は以下の写真を選択します。このように写真が変更されました。次に、このままだと、文字と写真の余白が気になるので、写真のサイズを調整します。サイズを調整する際は、この白色の所をクリックしながら動かすことで調整できます。すると、このように縦と横の比率を保ちながら、縮小することができました。このままだとなんとなく写真の縦と横のバランスが悪くなっております。そのような場合は、以下の「BOX」を選択すると、縦横比を気にせず自由に拡大や縮小ができますので、自由に大きさを変えたい場合は、「BOX」に変更して修正するようにしましょう。これで、自由に写真のサイズを変更して、配置できました。最後に、マージンを使って、文字と写真の位置を調整します。写真を選択して、白色の所にカーサルを移動させると、オレンジ色になります。この時に、左クリックを押しながら、上下に動かすことで、写真と文字の位置を調整することができます。今回は、このくらいの距離に調整しておきます。ちなみに、マージンの調整は、上部のスタイルバーからも変更できます。私と同じ間隔にしたい場合は、「50」に設定してください。これで、ファーストビューの完成です。最後に、作成したファーストビューをライフプレビューで確認してみましょう。右上にある「ライフプレビュー」を押します。「スタート」をクリックします。このURLをクリックすると、今作ったファーストビューを確認することができます。テンプレートを使うとこんなに簡単にクオリティーの高いファーストビューを作ることができました。https://design-yandy.com/wp-content/uploads/2021/12/シーケンス-01.mp4まとめ今回の動画では、STUDIOで簡単におしゃれなファーストビューの作り方をご紹介しました。ファーストビューを見たユーザーは、3秒でWEBサイトが自分にとって必要かを判断していると言われております。そのため、ファーストビューは、サイトの中で1番重要になってきますので、ぜひ色んなファーストビューを作って、スキルを高めて下さい。他にもSTUDIOの色んな機能の使い方をまとめておりますので、気になる方はどうぞ。初心者にもわかりやすいSTUDIO講座まとめ【50件以上納品した私が解説】ノーコードツールSTUDIOのわかりやすいSTUDIO講座を知りたいですか?本記事では、私がこれまでYoutubeやブログで発信してきたおすすめのSTUDIOの講座を紹介しました。ご自身のスキルに合わせたおすすめの講座を紹介しております。これからSTUDIOのスキルを高めたい方は、是非記事をご覧ください。DesignerYuta某大手企業勤務。2020年よりWEB制作やデザインの勉強を開始し、40件以上の案件を対応。Photoshopを中心にスキル上達コンテンツを無料で発信中。