コーディングなしでHPを作ろう!

こんにちは!内定者の増田哲知です。

皆さんはHTMLでページを作りたいけど
コーディングが分からないといった経験はないでしょうか?

ホームページやランディングページなどをスマホやPC、どの端末でも対応している
ページを作成したいとなったとき必要となるのが、HTMLを使用したコーディングです。
コーディングには専門知識が必要となり、誰でもすぐに作成できるというわけではありません。

そこで今回は、コーディング不要、ドラッグ&ドロップでページが作成できる
「Stitches」ついてご紹介していきます。

Stitches(ステッチーズ)とは

ステッチーズとは、各パーツを組み合わせるだけで簡単に
HTMLを作成できる無料のジェネレーターツールです。

コーディングに関する知識が少なくても、デザイナーやコーダーにイメージなどを
伝えたい際にわかりやすいプロトタイプを作ることが可能です。
また、お客様へ提案する際にも確認として簡単なページがあれば
認識の誤解を生むことなく製作を作ることができます。

さらにステッチーズでは「Tailwind CSS」を使用しています。
誰でも無料で利用可能になっており、様々なデザインに対応しているため
他のツールを用いてHTMLを書き直せばカスタマイズできるようになっています。

それでは実際に使い方を見ていきましょう!

ステッチーズの使い方

コンテンツの項目

ステッチーズには多くの設定可能なコンテンツがありますので、
簡単に表にまとめさせていただきます。
設定できるコンテンツは16個あるので左上「All」から順にご説明します。

Allジャンル関係なくすべてのアイテムを表示します。
Navigationホームページの目次パーツです。
Footerフッターと言い、ページの一番下に表示されます。
ロゴや権利表記などのパーツです。
Formログインフォームです。ログインを使用している企業はぜひ設置したいですね。
Listお知らせ一覧など簡単なラインナップを紹介することが可能になります。
Heroアイキャッチデザインのパーツです。こちらは3種類あり
ムービー再生、テキストとボタン、テキストと画像があります。
Features商品やサービスの特徴を紹介するためのパーツです。
写真のあるタイプ・ないタイプが各3種類ずつ用意してあります。
Pricing価格を表示するパーツです。こちらは1パターンで4つの価格を
紹介できるようになっています。
Articlesテキストパーツです。商品説明や企業の理念、インタビューなど
様々な使い方が考えられます。
画像パーツと組み合わせて使用するとより視認性の高いものができます。
Call to Action申し込みボタンパーツです。
Progress Bar進行状況を示す事のできるパーツです。
申し込みや注文の流れなどをお客様にも共有することができます。
Feed/Comments口コミなどを掲載できるようなパーツです。
Notification通知や注意事項を表示できるパーツです。
Stats商品情報について記載できるパーツです。
服や靴のサイズなど詳細な商品情報が追加できます。
Cardsサムネイルを用いてリスト表示できるパーツです。
Listとは別に画像と文字でリスト表示ができます。
Tabsタブの切替ができるパーツです。切替はNavigationにも搭載されていますが、
こちらではページ内コンテンツをさらにタブで切り替えることができます。

実際の配置

上記の表である程度コンテンツの内容は確認できたでしょうか?
確認ができたら、各パーツを自分の思うように配置してしてみましょう!

画面の左側(青枠)にあるコンテンツを右側のボード(赤枠)に
ドラッグ&ドロップするだけで配置できるようになっています。
配置したコンテンツを削除したい場合は、コンテンツにカーソルを合わせると
表示されるゴミ箱アイコンをクリックします。

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

 

ホームページの確認

ダウンロードが完了したら、正しく作成されているかどうか
一度ファイルを開いてみましょう。
確認し、大丈夫そうであればこれで作業は終了です。
そのまま利用しても構いませんし、
他のツールを使用することでさらにカスタマイズも可能です。

最後に

いかがでしたでしょうか?

今回はコーディング不要でできてしまうHPの作り方について
簡単にご紹介させていただきました。

Stitches(ステッチーズ)はドラッグ&ドロップでパーツを配置していくだけで
簡単にページを仕上げることのできるツールです。
HTMLファイルを作成できるツールですので、
現在利用しているCMSに入れてもしっかりと動いてくれます。

ページ作成をしたくてもコーディングを頼める人がいないという方や
HPのご提案などで簡単な資料を作ってみたいという方はぜひ利用してみてください。

今回の記事を今後の業務に少しでも役立てていただければ幸いです。

参考になったらシェアをお願いします!