今回は、ノーコードツールSTUDIOでおすすめのテンプレートを3つ紹介します。
「STUDIOでおすすめのテンプレートって何??」
「初心者だけと高クオリティーのサイトを作りたい。。。」
こういった疑問や不安をこの記事を読めば、解決できます。
今回ご紹介する方法を真似して頂くと、ハンバーガーメニューを簡単に作ることができますので、ぜひ一緒に作っていきましょう。
ちなみに、この記事を書いている私は、STUDIO関連の案件を50個以上こなしてきました。
かなり多くの経験があるので、信頼担保に繋がるのかなと。
Contents
STUDIOでおすすめのテンプレートを3つ紹介
それでは、案件対応で使えるおすすめのテンプレートを3つ紹介します。
① Mary Jones
② The Lifestyle
③ Memory
また、YouTubeにて徹底解説しました。
文字情報よりも頭に入りやすいかと思いますので、基本的には動画を推奨します。
① Mary Jones
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_00_52_23.静止画002-1280x720.jpg)
まず、私がおすすめする1つ目のテンプレートは、「Mary Jones」のテンプレートです。
このテンプレートは、シンプルなサイトになっておりますので、どんなジャンルのサイトにも流用可能なパーツがたくさんあります。
それでは、テンプレートを見ながら、どういったパーツをよく利用しているかを解説します。
TOP
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_00_53_25.静止画003-1280x720.jpg)
まずは、「TOP」を見てみましょう。
TOPについては、グローバルナビゲーションや
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_00_59_07.静止画004-1280x720.jpg)
SNSのアイコンの表示がとても参考になるかと思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_02_19.静止画005-1280x720.jpg)
ABOUT
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_07_28.静止画006-1280x720.jpg)
次に、「ABOUT」のパーツです。
「ABOUT」のパーツは、「文字」と「写真」を横並びに表示したい場合に利用しやすいかと思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_12_12.静止画007-1280x720.jpg)
WORKS
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_20_17.静止画008-1280x720.jpg)
そして、「WORKS」のパーツです。
「WORKS」のパーツについては、写真を横並びに表示したい場合に利用しやすく、
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_22_28.静止画010-1280x720.jpg)
さらに、写真の上にマウスオーバーした際に、写真が少し透明になることがわかると思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_30_24.静止画011-1280x720.jpg)
これは、写真のクリックの動作を促すアニメーションが設定されており、実際にクリックすると詳細のページに遷移するようになります。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_47_21.静止画012-1280x720.jpg)
このように、バナーや写真を掲載し、クリックの動作を促すような表現をしたい場合に、このパーツを利用して下さい。
BLOG
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_01_59_05.静止画013-1280x720.jpg)
最後に、「BLOG」のパーツについてです。
こちらの「BLOG」のパーツでは、上下に写真と文字が配置されたボックスが3つ横並びになっており、記事やお知らせ欄の表示によく利用されます。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_02_11_06.静止画014-1280x720.jpg)
1から作成しようとすると、意外と大変ですので、こちらのパーツもよく利用しております。
② The Lifestyle
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_02_31_11.静止画015-1280x720.jpg)
次に、私がおすすめする2つ目のテンプレートは、「The Lifestyle」のテンプレートです。
このテンプレートは、アニメーションの使い方がとても参考になります。
それでは、テンプレートを見ながら、どういったアニメーションがあるか解説します。
TOP
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_02_41_14.静止画016-1280x720.jpg)
まずは、「TOP」です。
サイトを開くと、文字が浮かび上がるように表示され、さらにスクロールを促すように上から下に線が伸びていきます。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_02_44_10.静止画017-1280x720.jpg)
このように、ファーストビューにアニメーションを設定すると、サイトを訪問した方が、質の高いサイトだと思ってもらうことができ、サイトを見て頂くきっかけにもなります。
TOPの下
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_03_33_17.静止画018-1280x720.jpg)
また、TOPの下には、3つの写真がありますが、マウスオーバーすると、写真の色が黒っぽくなり、さらに「view more」の文字が表示されるようになります。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_03_35_18.静止画019-1280x720.jpg)
こういった表現もクリックを促す時によくやりますので、参考にして下さい。
サイトの下部
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_03_55_06.静止画020-1280x720.jpg)
また、さらに下の方に移動すると、文章が1文字ずつ表示されます。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_03_56_10.静止画021-1280x720.jpg)
このように文字を表示することで、つい文字を目で追ってしまうので、文章に注目してほしい時に、効果的なアニメーションになります。
長めの文章に注目してほしい時は、ぜひ利用してみて下さい。
③ Memory
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_04_17_27.静止画022-1280x720.jpg)
最後に、私がおすすめする3つ目のテンプレートは、「Memory」のテンプレートです。
このテンプレートは、文字と写真のレイアウトの配置がとても特徴的です。
それでは、テンプレートを見てみましょう。
TOP
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_04_28_08.静止画023-1280x720.jpg)
まずは、「TOP」です。
サイトを開くと、とてもシンプルでオシャレなファーストビューになっております。
TOPの下
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_04_38_15.静止画024-1280x720.jpg)
そして、「TOPの下」です。
「TOPの下」を見てみると、写真と文字がうまく重ねあっており、3つの特徴が効果的に表現されております。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_04_42_08.静止画025-1280x720.jpg)
ゼロベースで作成しようとすると、写真と文字の配置のバランスがとても難しく、特にレスポンシブ対応に時間がかかってしまうかと思います。
一方、こちらのテンプレートは、すでにレスポンシブ対応もできているので、複数の特徴やSTEPなどを表現する時に利用しやすいかと思います。
サイトの下部
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_05_14_16.静止画027-1280x720.jpg)
さらに、下の方を見てみると、アプリのダウンロードを促すアイコンがありますので、そういった表現をサイト上で行いたい場合は、このパーツを利用されても良いかと思います。
![](https://design-yandy.com/wp-content/uploads/2022/09/24.00_05_14_16.静止画026-1280x720.jpg)
これで私がおすすめするテンプレートの紹介は終了です。
まとめ
![](https://design-yandy.com/wp-content/uploads/2022/03/スクリーンショット-2022-03-16-12.03.07.png)
今回は、案件対応で使えるおすすめのテンプレートを3つ紹介しました。
① Mary Jones
② The Lifestyle
③ Memory
サイトをスムーズに作成するコツは、今回ご紹介したようなテンプレートのパーツをうまくつなぎ合わせて作成していくことだと思います。
ぜひ、積極的にテンプレートを活用していきましょう。
![](https://design-yandy.com/wp-content/uploads/2022/01/アイキャッチ画像(studio)-1-320x180.jpg)