コーディングなしのWebサイト作成『STUDIO』入門

2-5. テンプレートを利用する

    STUDIOにはテンプレートが用意されており、これを組み合わせることでスピーディにサイトのデザインを制作できます。オリジナルでデザインを作る前に、このテンプレートを使って練習するのもおすすめです。

    公開日:2019/04/07最終更新日:2019/04/07

    1.テンプレートの使い方

    ADDパネル(左サイド)を表示し、一番左の「ボックス」タブの下へ移動すると「Templates」が並んでいます。
    気になるテンプレートを選び、利用したい要素をクリックまたはD&Dしてアードボード内に追加します。

    日本語テンプレートについて

    プロジェクトを作成する際には、いくつか日本語で作られたテンプレートが選択できますが、現時点ではデザイン編集画面にある「Template」からは選べません。将来的に利用できるようになるかもしれません。

    2.テンプレートの紹介

    テンプレートはは現時点で8種類あります。それぞれの特徴を簡単に解説します。

    Wireframe

    ダミーのコンテンツをベースとしているテンプレートです。

    ヘッダー、フッター、タイル状に画像を並べるギャラリー、画像とキャッチを並べたレイアウトなど、使いやすいボックスが揃っています。STUDIOの仕組みを知るのにピッタリですし、ページのレイアウトを練ってからビジュアルを検討したい場合にも役立つでしょう。

    Fitness Gym

    スポーティな写真を大きく配置している、ダイナミックでシンプルな英語テンプレートです。

    画面を画像とテキスト領域で2分割するブロックが特徴的です。PCでは画像の高さが600px固定になっていて、大きなディスプレイで間延びしないよう配慮されています。 

    Shop

    ショッピングサイトをイメージした、ダイナミックでシンプルな英語テンプレートです。

    ボックスを上手く階層化して、サイズの違うグリット的な外観を実現し、スマホでは1カラムになるよう工夫されています。

    ※検索やカートのアイコンの配置がありますが、現時点ではSTUDIO上に機能はなくあくまでイメージとなっています。

    Black

    黒を貴重としたスタイリッシュな英語テンプレートです。配色、写真の使い方なども参考になるでしょう。

    ヘッダーメニューがタブレット・スマホにも最適化されていて、スマホだと横スクロールに対応しています。

    Trip

    旅行ガイドサイトをイメージした写真が配置されているシンプルな英語テンプレートです。

    装飾・クセが少なく、そのまま使いまわしたりカスタマイズしやすいブロックが集まっています。

    The Burger

    写真を大きく配置した、英語のシングルページテンプレートです。

    店舗の利用を想定してか、Googleマップ埋め込みに対応したブロックも用意されています。

    Launch

    ランディングページをイメージした、シンプルな英語テンプレートです。

    ヘッダーメニュー右にコンバージョン誘導ボタンが各デバイスサイズで常時配置されているなど、マーケティングも意識されたレイアウトになっています。

    Material Design

    名前の通り Material Design 向けのパーツが用意されたテンプレートです。

    他のテンプレートとは趣が異なり、スマートフォンアプリのモックを作成したいときなどに適しています。

    コンテンツ用のボックスはそのまま配置すると幅100%で間延びしてしまうので、まず自分でコンテンツ幅指定用のボックスを配置し、その中に積み上げていく流れが良いでしょう。

    理解度チェック





    コーディングなしのWebサイト作成『STUDIO』入門

    1. STUDIOの概要とサインアップ

    2. STUDIOの基本操作

    3. STUDIOで作ったサイトを公開する

    4. STUDIO応用編



    このレッスンの著者