どうも、まさとらん（@0310lan）です！
今回は、ブラウザ上で誰でも簡単にWebサイトを作成できる無料の静的サイトジェネレータをご紹介します！
特別な開発環境を用意する必要はなくて、コマンドラインからの実行も不要でユーザー登録もありません。そのため、誰でも気軽にWebサイトを作り始められる手軽さが特徴になっています。
本記事の後半では、書き出したソースコードを使ってネット上に公開する手順についても解説しているので、ご興味ある方はぜひ参考にしてみてください！
【 T3MPL 】
「T3MPL」の使い方
それでは、「T3MPL」をどのように使えばいいのか詳しく見ていきましょう。
まずはサイトのトップページを下方にスクロールして、いくつかのテンプレートが表示されることを確認してください。
2020年10月時点において、以下のようなテンプレートを選択できるようになっています。
- ランディングページ
- スマホアプリ用のページ
- PCアプリ・Webサービス用のページ
- Coming Soonページ
- レジュメ用のページ
- プロフィールページ
今回は試しに、自分のプロフィールページを作成できるテンプレート【Fuse Core】を使ってみましょう。
以下のような編集エディタが表示されたら準備はOKです！
Webページの設定やカスタマイズについては、すべてこの画面上でできるようになっています。
■テンプレートをカスタマイズしよう！
「T3MPL」には豊富なカスタマイズ要素が提供されているので、いくつかピックアップしながらご紹介していきます。
まずは、左側メニューの上部にある選択ボックスから【Common】をクリックしてください。
「Common」は一般的なWebサイトの初期設定をカスタマイズできる機能になります。
例えば、言語の設定、title属性、ファビコン、Copyright…など、基本的な項目を設定していくだけなので簡単です。
基本設定が終わったら、もう一度メニュー上部から今度は【Site】をクリックしてください。
「Site」の設定項目が表示されるのですが、これがWebページの内容をカスタマイズする機能になります。
背景画像、テキスト、ボタン、リンク…など、さまざまな項目を簡単にカスタマイズできるように設計されています。（設定内容についてはテンプレートによって異なります）
また、搭載されているテキストエディタでHTMLやマークダウンを独自に記述して反映させることも可能です。
いくつかの設定を変えるだけで、すぐに自分だけのWebページを作成できるのが魅力です。
「Fuse Core」のテンプレートは、SNSのアイコンも設定できるので合わせてカスタマイズしておきましょう。
あらかじめ主要なWebサービスのアイコンが登録されているので、選択するだけですぐにWebページに反映できます。
カスタマイズが終了したら、見た目を確認するために画面上部にあるプレビューを試してみましょう。
PC・スマホでそれぞれ問題ないかをチェックしておくといいでしょう。
また、テンプレートによっては複数のページで構成されているものもあるので、それぞれのページで確認しておくようにしましょう。
■書き出しと公開について
「T3MPL」はあくまでも静的サイトジェネレータなので、ホスティング機能まではサポートしていません。
ただし、ソースコードを書き出せるのでAWSなど自分で用意したサーバーで公開することは可能です。もしくは、「GitHub Pages」や「Netlify」を利用して手軽に公開してもいいでしょう。
そこで、本記事では誰でも簡単にWebページを公開できる「Netlify」を利用した公開手順について解説をしておきます。
まず最初に「T3MPL」で作成したWebサイトのソースコードを書き出しましょう。方法は簡単で画面上部にある【Publish】ボタンをクリックします。
確認ウィンドウが表示されるので、下部にあるボタンをクリックしましょう。
これでソースコードをまとめたZIPファイルがダウンロードできます。
HTMLファイルや画像などの必要なファイルがすべてまとめられているので、サーバーにアップロードすればすぐにでも利用できる状態というわけです。
もちろんソースコードは自由に編集できるので、プログラミングできる方であればさらにカスタマイズしていくことも可能です。
次に、「Netlify」にアクセスしましょう。
【 Netlify 】
https://www.netlify.com/
ユーザー登録を済ませればダッシュボードが表示されるので、先ほどダウンロードしたZIPファイルをそのままドラッグ＆ドロップしましょう！
するとURLが生成されるので、アクセスしてみるとWebサイトがネット上に公開されているのが分かります！
簡単ですね。
もし、Webページで気に入らないところがあれば、もう一度「T3MPL」でカスタマイズしてからZIPファイルを「Netlify」にアップロードすればOKです！
ちなみに「Netlify」で自動生成されたURLは長いので、【Site settings】→【Change Site name】から好きな英数字に変更しておくと便利です。
■おまけ（プロジェクトの保存）
「T3MPL」はソースコードの書き出し以外にも、プロジェクトのデータファイルを書き出す機能も提供されています。
これは簡単に言うとプロジェクトの保存機能になるわけですが、クラウド上にデータを保存するのではなく自分のPCにデータを保存する仕組みになっています。
使い方としては、「T3MPL」のエディタ上部のオプションアイコンをクリックします。
【Export template .t3mpl】の項目をクリックすると、テンプレートのデータファイルを取得できます。
【Export data .t3data】の項目をクリックすると、自分でカスタマイズした内容を記録したデータファイルを取得できます。
この2つのファイルを持っていれば、プロジェクトを削除してしまってもあとからインポートするだけですぐに続きを再開できるというわけです。念のため、作業の最後にファイルをダウンロードして持っておくと安心です。
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はブラウザだけで完結する静的サイトジェネレータについてご紹介しました！
開発環境を用意しなくてもすぐにWebサイトを作成できる手軽さと、すべてのソースコードを書き出して自由にカスタマイズできる自由度の高さを兼ね備えたサービスと言えるでしょう。
これからWebサイトを作成しようと考えている人は、ぜひ参考にしてみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
