テンプレートを利用するSTUDIOにはテンプレートが用意されており、これを組み合わせることでスピーディにサイトのデザインを制作できます。オリジナルでデザインを作る前に、このテンプレートを使って練習するのもおすすめです。ブックマーク公開日:2019/04/07最終更新日:2019/04/07目次1.テンプレートの使い方2.テンプレートの紹介1.テンプレートの使い方ADDパネル(左サイド)を表示し、一番左の「ボックス」タブの下へ移動すると「Templates」が並んでいます。気になるテンプレートを選び、利用したい要素をクリックまたはD&Dしてアードボード内に追加します。日本語テンプレートについてプロジェクトを作成する際には、いくつか日本語で作られたテンプレートが選択できますが、現時点ではデザイン編集画面にある「Template」からは選べません。将来的に利用できるようになるかもしれません。2.テンプレートの紹介テンプレートはは現時点で8種類あります。それぞれの特徴を簡単に解説します。Wireframeダミーのコンテンツをベースとしているテンプレートです。ヘッダー、フッター、タイル状に画像を並べるギャラリー、画像とキャッチを並べたレイアウトなど、使いやすいボックスが揃っています。STUDIOの仕組みを知るのにピッタリですし、ページのレイアウトを練ってからビジュアルを検討したい場合にも役立つでしょう。Gymスポーティな写真を大きく配置している、ダイナミックでシンプルな英語テンプレートです。画面を画像とテキスト領域で2分割するブロックが特徴的です。PCでは画像の高さが600px固定になっていて、大きなディスプレイで間延びしないよう配慮されています。Shopショッピングサイトをイメージした、ダイナミックでシンプルな英語テンプレートです。ボックスを上手く階層化して、サイズの違うグリット的な外観を実現し、スマホでは1カラムになるよう工夫されています。※検索やカートのアイコンの配置がありますが、現時点ではSTUDIO上に機能はなくあくまでイメージとなっています。Black黒を貴重としたスタイリッシュな英語テンプレートです。配色、写真の使い方なども参考になるでしょう。ヘッダーメニューがタブレット・スマホにも最適化されていて、スマホだと横スクロールに対応しています。Trip旅行ガイドサイトをイメージした写真が配置されているシンプルな英語テンプレートです。装飾・クセが少なく、そのまま使いまわしたりカスタマイズしやすいブロックが集まっています。Burger写真を大きく配置した、英語のシングルページテンプレートです。店舗の利用を想定してか、Googleマップ埋め込みに対応したブロックも用意されています。Launchランディングページをイメージした、シンプルな英語テンプレートです。ヘッダーメニュー右にコンバージョン誘導ボタンが各デバイスサイズで常時配置されているなど、マーケティングも意識されたレイアウトになっています。向けのパーツが用意されたテンプレートです。他のテンプレートとは趣が異なり、スマートフォンアプリのモックを作成したいときなどに適しています。コンテンツ用のボックスはそのまま配置すると幅100%で間延びしてしまうので、まず自分でコンテンツ幅指定用のボックスを配置し、その中に積み上げていく流れが良いでしょう。