ドラッグ＆ドロップでHTMLページができる「Stitches」の使い方

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

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

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

Stitchesとは

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

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

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

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

Stitchesの使い方

設置できる項目一覧

1.All

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

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

2.Navigation

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

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

3.Footer

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

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

4.Form

ログインフォームです。

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

5.List

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

6.Hero

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

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

7.Features

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

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

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

8.Pricing

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

9.Articles

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

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

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

10.Call to Action

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

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

11.Progress Bar

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

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

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

12.Feed/Comments

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

13.Notification

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

14.Stats

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

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

15.Cards

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

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

16.Tabs

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

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

コンテンツを配置する

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

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

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

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

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

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

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