paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

コメントで意見交換もOK!無料でWebサイトのプロトタイプを作成・公開可能な「Draftium」を使ってみた!

f:id:paiza:20190130130110j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単に短時間でWebサイトのプロトタイプを作成・公開できる無料のWebサービスをご紹介します!

デザイン性の高いプロトタイプを構築できるのが魅力なうえ、コメント機能を活用することで公開したプロトタイプに不特定多数の人からさまざまな意見をもらうこともできるスグレモノです。

これからプロトタイプを作ろうと考えている人も含めて、ご興味ある方はぜひ参考にしてみてください!

Draftium

f:id:paiza:20190130125810j:plain

■「Draftium」の使い方

それでは、「Draftium」をどのように使っていけばいいのかを見ていきましょう!

まずは簡単なユーザー登録を済ませるために、トップページに配置されているボタンをクリックします。

f:id:paiza:20190130130240j:plain


ユーザー登録フォームが表示されるので、好きなユーザー名・メールアドレス・パスワードを入力しましょう。

f:id:paiza:20190130130256j:plain


すると、自分専用の「ダッシュボード」が表示されます!

f:id:paiza:20190130130317j:plain

この画面から、新規のプロジェクトを作成したりアカウントの管理などができるようになります。

■テンプレートから素早くプロトタイプを作ってみよう!

「Draftium」でプロトタイプを作る方法はいくつかあるのですが、まずは公式で提供されているテンプレートを使った作成方法を見ていきましょう!

「ダッシュボード」の画面右上にある「Create New」ボタンをクリックします。

f:id:paiza:20190130130348j:plain


すると、さまざまな用途別に用意されたテンプレートが一覧表示されます!

f:id:paiza:20190130130403j:plain

ポートフォリオ系、ショップ系、企業向け、イベント・告知系、マーケティング系など、幅広いジャンルから選択できます。


今回はIT企業向けのテンプレート「IT Services」を選択してみます。

f:id:paiza:20190130130422j:plain

マウスカーソルを重ねるとボタンが表示されるので、「Start editing」ボタンをクリックしてください。


テンプレートを自由にカスタマイズできる「編集エディタ」が起動します!

f:id:paiza:20190130130439j:plain

このエディタ上で自分のイメージ通りにWebコンテンツを編集していくわけです。


基本的には、テンプレートのテキストを編集していくのが簡単でしょう。

f:id:paiza:20190130130455j:plain


また、画面上の「+」アイコンをクリックしてみてください。

f:id:paiza:20190130130513j:plain


するとブロック単位にカテゴライズされたWebコンテンツの一覧が表示されます!

f:id:paiza:20190130130533j:plain

ギャラリー、FAQ、価格表、チーム・会社紹介、ブログ、SNS、About…など、すぐに利用できる膨大な数のコンテンツを選択するだけで簡単に取り込めます。


テンプレートに最初から配置されているコンテンツは、設定メニューから非表示にしたり削除することもできます。

f:id:paiza:20190130130551j:plain


ある程度、編集ができたら画面上部にある「Preview」ボタンをクリックしましょう。

f:id:paiza:20190130130610j:plain


すると、スマホ・タブレット・PCでのプレビューを表示することができます!

f:id:paiza:20190130130632j:plain

このように、テンプレートを活用してコンテンツを自由に編集していくことで簡単にWebサイトのプロトタイプを構築することができます。(ゼロから自分で構築することもできます…)

■Webコンテンツをカスタマイズしてみよう!

「Draftium」にはWebコンテンツを細かくカスタマイズできる機能も多く搭載されているので、いくつか便利な機能をピックアップしてご紹介しておきます!

例えば、コンテンツのクオリティを高めたい場合に高画質なフリー画像を配置できる機能があります。

設定メニューから「Background」タブの「Gallery」ボタンをクリックします!

f:id:paiza:20190130130715j:plain


「Free photos」タブを見ると大量の画像が表示されるので、任意の画像をクリックしてみてください。

f:id:paiza:20190130130730j:plain

検索ボックスから好きなキーワードで検索することも可能です。


選択した画像が表示されるので、問題なければ「Apply image」ボタンをクリックします。

f:id:paiza:20190130130758j:plain


すると、こんな感じのコンテンツが…

f:id:paiza:20190130130814j:plain


画像を背景にしたコンテンツに変化します!

f:id:paiza:20190130130828j:plain

もちろん、自分で用意した画像を配置することもできます。


また、設定メニューから「Animation」タブを開くと、コンテンツへ自動的にアニメーション効果を付与することもできます。

f:id:paiza:20190130130925j:plain

フェードイン、ズームイン…など、いくつかの効果とスピードの調整などをすれば、ダイナミックな表現も可能です。(パララックス効果も可)


さらに、マップなどインタラクティブなコンテンツの場合は専用のエディタを利用して編集できます。

f:id:paiza:20190130130955j:plain

場所の名称や住所などを入力するだけで、簡単にマッピングを行うことができるようになっています。(複数登録も可能)


マップは画面いっぱいに表示することができます!

f:id:paiza:20190130131008j:plain


複数のページから構成されるWebページを作ることも可能で、画面上部のメニューから新規ページを追加できます。

f:id:paiza:20190130131023j:plain


追加したページの名称や公開する時のURLを自分で設定することも可能です。

f:id:paiza:20190130131051j:plain


追加したページをクリックしてみましょう!

f:id:paiza:20190130131104j:plain


すると、ヘッダー・フッターだけで中身の無い新規ページが表示されました。

f:id:paiza:20190130131119j:plain

あとは、自由にコンテンツを追加・編集して新規ページを作成していけばいいわけです。


また、新規ページをリンクさせたい場合はナビゲーションを選択します。

f:id:paiza:20190130131148j:plain


リンクさせたいタブを選択して、先ほど作成した新規ページをクリックすれば完了です!

f:id:paiza:20190130131204j:plain

これで、公開した時にナビゲーションタブをクリックすると指定したページに画面遷移するようになります。

このように、簡易的なプロトタイプだけでなく細かく作り込んだWebサイトも構築できるので用途に合わせて使い分けるといいでしょう。

■コメント機能を活用してプロトタイプを公開しよう!

「Draftium」には作成したプロトタイプをネット上に公開できる機能が用意されています。

方法は簡単で画面右上にある「Publish」ボタンをクリックするだけです!

f:id:paiza:20190130131239j:plain


すると、公開用のリンクが生成されるので「Open」ボタンをクリックするとブラウザで表示することができます。

f:id:paiza:20190130131302j:plain

また、このリンクをSNSやメールなどでシェアすれば、誰でも閲覧することができるわけです。


さらに面白い機能として公開したプロトタイプに「コメント機能」を組み込むリンクを生成することができます!

f:id:paiza:20190130131317j:plain


このリンクをシェアすることで、ブラウザに表示されたWebサイトに「コメントボタン」が配置されます。

f:id:paiza:20190130131333j:plain


このボタンをクリックすると「コメントエディタ」が起動します!

f:id:paiza:20190130131403j:plain

画面左側にWebサイトが表示されて、右側にコメントの入力や表示ができるようになります。


Webサイトの部分をどこでもいいのでクリックするとマーキングが可能で、そのポイントに対して自由にコメントを投稿できるようになるわけです。

f:id:paiza:20190130131421j:plain

これにより、不特定多数の人からさまざまな意見を収集することができるので便利です。


また、エディタの画面に戻って上部にある「コメント」アイコンをクリックします。

f:id:paiza:20190130131439j:plain


ここで投稿されたコメントをすべて確認したり、返信を投稿することも可能です!

f:id:paiza:20190130131501j:plain

このコメント機能を活用することで、プロトタイプをどんどん改善していくことができるわけです。

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、誰でも簡単にコメント機能付きのプロトタイプを作成できるWebサービスをご紹介しました!

とにかく扱いやすい操作感と良質なコンテンツを短時間で作れるのが魅力で、自分のイメージに近いプロトタイプを作ってチーム内でシェアするには最適なサービスだと感じました。

またブラッシュアップするために、さまざまな人から意見をもらうことも可能なため時間の効率化にも繋がるでしょう。

ぜひ、みなさんもオリジナルのWebサイトを構築してシェアしてみてはいかがでしょうか。


<参考>



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編AI機械学習入門

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud