ホームページやECサイト、ランディングページやなど、「レスポンシブ対応しているページを作成したい」というときに必要となるのが、HTMLを使用したコーディングです。コーディングは専門知識が必要となるため、思い立ったその場で誰でもすぐに作成できる、というわけにはいきません。

そこで今回は、無料のオンラインツール「Stitches」を紹介します。

「Stitches」は、コーディング不要、ドラッグ&ドロップでページが完成し、同時にHTMLファイルも生成できるジェネレーターツールです。現在使用しているCMSから乗り換えの必要もなく、「ページを追加したい」「ランディングページを作成したい」という方におすすめです。

Stitchesとは

1.png
Stitches
Stitchesとは、パーツを組み合わせるだけで簡単にHTMLを作成できるジェネレーターツールです。

コーディングに関する知識があまりなくても、デザイナーやコーダーと「こんなホームページを作りたい」という意思疎通を図る際にプロトタイプとして作れます。

クライアントからホームページ制作の発注を受けた場合に、クライアントと正しい共通認識をもちたい際にも便利です。

加えて、Stitchesでは「Tailwind CSS」が用いられています。個人でも商用でも利用可能で、別のツールを用いてHTMLを書き直せばカスタマイズできる自由度の高さもおすすめです。

Stitchesの使い方

設置できる項目一覧

1.All

2.png
ジャンル関係なくすべてのアイテムを表示します。

なお、表示される順番は項目が並んでいる順番の通りです。

2.Navigation

3.png
ホームページの目次となるパーツです。基本的に一番上に表示されます。

パーツの配置に悩んだ場合は、まずはこちらのパーツを一番上に配置しましょう。

3.Footer

4.png
企業のロゴや権利表記などを記しているパーツで、基本的にホームページの一番下に表示します。

こちらもNavigation同様、ホームページ作成には欠かせないパーツです。

4.Form

5.png
ログインフォームです。

アカウントでログインして利用するシステムを用いている場合は、ぜひ配置しましょう。

5.List

6.png
アイコンとタイトル、キャプションがセットになったパーツです。
お知らせの一覧、商品やサービスの簡単なラインナップに活用できますので、情報をまとめて簡潔に表示する際におすすめです。

6.Hero

7.png
ホームページの目玉となるアイキャッチデザインのパーツです。
ムービー再生を前提としたパーツ、テキストとボタンが配置されたパーツ、テキストと画像がセットになったパーツの3種類が用意されています。

ホームページの雰囲気を左右する重要なパーツですので、誰に向けてどのような情報を発信したいのかを明確に定めた上で選択しましょう。

7.Features

8.png
商品やサービスの特徴を紹介するためのパーツです。写真のあるタイプ・ないタイプに、それぞれ複数のパターンがあります。

アイキャッチとセットで考えることが多く、画像とテキストのバランスを考えながら配置するパーツを決めることになります。

画像を多めに入れるべきか、そうでないべきかは企業によって異なりますので、相談の上決めてください。

8.Pricing

9.png
価格を表示するパーツです。デフォルトでは、4つの価格帯を紹介するパーツとなっています。
パターンは1つしかありませんが「ここに価格を表示する」と大雑把に決めておくだけでも効果があります。

9.Articles

10.png
テキストを多めに含むパーツです。商品やサービス説明、企業の理念の説明など、様々な使い方が考えられます。

テキストのみで説明しても構いませんが、視認性が下がってしまったり情報が正しく伝わらない可能性があったりということも考えられます。

直前に画像パーツを入れるなど、ユーザーに読んでもらうための工夫を意識しましょう。

10.Call to Action

11.png
申し込みボタンのパーツです。

申し込みを誘導するためのページを作る際に便利です。

11.Progress Bar

12.png
進行状況をユーザーに示すためのパーツです。

申し込みや注文の流れをユーザーに示し、あとどれくらいで完了するかを可視化すると、ユーザーの「あとどのくらい入力が続くのだろうか」という心理的負担が少なくなります。

エントリーフォームや、注文フォームページを作りたい方におすすめです。

12.Feed/Comments

13.png
口コミなどを利用したい場合に有効です。

13.Notification

14.png
通知や注意事項を表示するパーツです。

14.Stats

15.png
商品のスペックについて記載するパーツです。

服や靴、ギフトボックスなど、より細やかな商品情報が必要となる場合におすすめです。

15.Cards

16.png
サムネイル画像を用いてリスト表示するパーツです。Listとは異なり、こちらでは画像のみが用いられています。

サムネイルを用いた記事や、ECサイトなどで活用できます。

16.Tabs

17.png
タブの切替を行うパーツです。タブの切替機能はNavigationにも搭載されていますが、こちらではページ内のコンテンツをさらにタブで整理するためのものです。

入れ子状のページをタブで整理したい場合に活躍します。

コンテンツを配置する

18.png
コンテンツの内容が確認できたら、それぞれを好きなように配置してください。
画面の左側にあるコンテンツを、右側のボードにドラッグ&ドロップするだけで配置でき、自由に並べ替えられます。

配置したコンテンツを削除したい場合は、コンテンツにカーソルを合わせると表示されるゴミ箱アイコンをクリックします。

配置が完了したら、「Generate HTML With Functional CSS」をクリックしてください。自動でHTMLのダウンロードが行われます。

生成したホームページを確認する

ダウンロードしたら、正しく作成されているかどうかの確認も兼ねて一度ファイルを開きましょう。

確認できれば作業は終了です。

そのまま利用しても構いませんし、別のツールでさらにカスタマイズも可能です。