どうも、まさとらん（@0310lan）です！
今回は、誰でも簡単に短時間でWebサイトのプロトタイプを作成・公開できる無料のWebサービスをご紹介します！
デザイン性の高いプロトタイプを構築できるのが魅力なうえ、コメント機能を活用することで公開したプロトタイプに不特定多数の人からさまざまな意見をもらうこともできるスグレモノです。
これからプロトタイプを作ろうと考えている人も含めて、ご興味ある方はぜひ参考にしてみてください！
【 Draftium 】
■「Draftium」の使い方
それでは、「Draftium」をどのように使っていけばいいのかを見ていきましょう！
まずは簡単なユーザー登録を済ませるために、トップページに配置されているボタンをクリックします。
ユーザー登録フォームが表示されるので、好きなユーザー名・メールアドレス・パスワードを入力しましょう。
すると、自分専用の「ダッシュボード」が表示されます！
この画面から、新規のプロジェクトを作成したりアカウントの管理などができるようになります。
■テンプレートから素早くプロトタイプを作ってみよう！
「Draftium」でプロトタイプを作る方法はいくつかあるのですが、まずは公式で提供されているテンプレートを使った作成方法を見ていきましょう！
「ダッシュボード」の画面右上にある「Create New」ボタンをクリックします。
すると、さまざまな用途別に用意されたテンプレートが一覧表示されます！
ポートフォリオ系、ショップ系、企業向け、イベント・告知系、マーケティング系など、幅広いジャンルから選択できます。
今回はIT企業向けのテンプレート「IT Services」を選択してみます。
マウスカーソルを重ねるとボタンが表示されるので、「Start editing」ボタンをクリックしてください。
テンプレートを自由にカスタマイズできる「編集エディタ」が起動します！
このエディタ上で自分のイメージ通りにWebコンテンツを編集していくわけです。
基本的には、テンプレートのテキストを編集していくのが簡単でしょう。
また、画面上の「＋」アイコンをクリックしてみてください。
するとブロック単位にカテゴライズされたWebコンテンツの一覧が表示されます！
ギャラリー、FAQ、価格表、チーム・会社紹介、ブログ、SNS、About…など、すぐに利用できる膨大な数のコンテンツを選択するだけで簡単に取り込めます。
テンプレートに最初から配置されているコンテンツは、設定メニューから非表示にしたり削除することもできます。
ある程度、編集ができたら画面上部にある「Preview」ボタンをクリックしましょう。
すると、スマホ・タブレット・PCでのプレビューを表示することができます！
このように、テンプレートを活用してコンテンツを自由に編集していくことで簡単にWebサイトのプロトタイプを構築することができます。（ゼロから自分で構築することもできます…）
■Webコンテンツをカスタマイズしてみよう！
「Draftium」にはWebコンテンツを細かくカスタマイズできる機能も多く搭載されているので、いくつか便利な機能をピックアップしてご紹介しておきます！
例えば、コンテンツのクオリティを高めたい場合に高画質なフリー画像を配置できる機能があります。
設定メニューから「Background」タブの「Gallery」ボタンをクリックします！
「Free photos」タブを見ると大量の画像が表示されるので、任意の画像をクリックしてみてください。
検索ボックスから好きなキーワードで検索することも可能です。
選択した画像が表示されるので、問題なければ「Apply image」ボタンをクリックします。
すると、こんな感じのコンテンツが…
画像を背景にしたコンテンツに変化します！
もちろん、自分で用意した画像を配置することもできます。
また、設定メニューから「Animation」タブを開くと、コンテンツへ自動的にアニメーション効果を付与することもできます。
フェードイン、ズームイン…など、いくつかの効果とスピードの調整などをすれば、ダイナミックな表現も可能です。（パララックス効果も可）
さらに、マップなどインタラクティブなコンテンツの場合は専用のエディタを利用して編集できます。
場所の名称や住所などを入力するだけで、簡単にマッピングを行うことができるようになっています。（複数登録も可能）
マップは画面いっぱいに表示することができます！
複数のページから構成されるWebページを作ることも可能で、画面上部のメニューから新規ページを追加できます。
追加したページの名称や公開する時のURLを自分で設定することも可能です。
追加したページをクリックしてみましょう！
すると、ヘッダー・フッターだけで中身の無い新規ページが表示されました。
あとは、自由にコンテンツを追加・編集して新規ページを作成していけばいいわけです。
また、新規ページをリンクさせたい場合はナビゲーションを選択します。
リンクさせたいタブを選択して、先ほど作成した新規ページをクリックすれば完了です！
これで、公開した時にナビゲーションタブをクリックすると指定したページに画面遷移するようになります。
このように、簡易的なプロトタイプだけでなく細かく作り込んだWebサイトも構築できるので用途に合わせて使い分けるといいでしょう。
■コメント機能を活用してプロトタイプを公開しよう！
「Draftium」には作成したプロトタイプをネット上に公開できる機能が用意されています。
方法は簡単で画面右上にある「Publish」ボタンをクリックするだけです！
すると、公開用のリンクが生成されるので「Open」ボタンをクリックするとブラウザで表示することができます。
また、このリンクをSNSやメールなどでシェアすれば、誰でも閲覧することができるわけです。
さらに面白い機能として公開したプロトタイプに「コメント機能」を組み込むリンクを生成することができます！
このリンクをシェアすることで、ブラウザに表示されたWebサイトに「コメントボタン」が配置されます。
このボタンをクリックすると「コメントエディタ」が起動します！
画面左側にWebサイトが表示されて、右側にコメントの入力や表示ができるようになります。
Webサイトの部分をどこでもいいのでクリックするとマーキングが可能で、そのポイントに対して自由にコメントを投稿できるようになるわけです。
これにより、不特定多数の人からさまざまな意見を収集することができるので便利です。
また、エディタの画面に戻って上部にある「コメント」アイコンをクリックします。
ここで投稿されたコメントをすべて確認したり、返信を投稿することも可能です！
このコメント機能を活用することで、プロトタイプをどんどん改善していくことができるわけです。
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、誰でも簡単にコメント機能付きのプロトタイプを作成できるWebサービスをご紹介しました！
とにかく扱いやすい操作感と良質なコンテンツを短時間で作れるのが魅力で、自分のイメージに近いプロトタイプを作ってチーム内でシェアするには最適なサービスだと感じました。
またブラッシュアップするために、さまざまな人から意見をもらうことも可能なため時間の効率化にも繋がるでしょう。
ぜひ、みなさんもオリジナルのWebサイトを構築してシェアしてみてはいかがでしょうか。
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
