どうも、まさとらん（@0310lan）です！
今回は、誰でも簡単にモダンなWebサイトを作ってそのまま公開できる無料のWebサービスをご紹介します！
類似サービスはいくつかあるのですが、Webサイトの構築やデザインの骨組みを人工知能が自動的に作ってくれるため、簡単な編集だけすれば立派なWebサイトが完成するというのが最大の特徴です。
【 Bookmark 】
■「Bookmark」の使い方！
それでは、実際に「Bookmark」を使いながらどのようなサービスなのかを見ていきましょう！
まず、サイトにアクセスしてトップページにある「START NOW」ボタンをクリックします。
次に、「名前・メルアド・パスワード」を入力してユーザー登録を行います。
すると、自分専用の「ダッシュボード」が作られます！
この画面からWebサイトを作ったり、ページ解析やサポートなどさまざまな機能にアクセスすることができます。
今回は、せっかくなので人工知能を使ったWebサイト制作に挑戦しながら、詳しい機能をご紹介していきたいと思います！
■人工知能に手伝ってもらおう！
新規にWebサイトを作成するには、ダッシュボードにある「Create Website」ボタンをクリックします。
すると、「AiDA」と呼ばれる人工知能を使ったアシスタントを利用する画面が表示されます！
「START NOW」ボタンをクリックして開始しましょう。
まずは、どのようなWebサイトを作りたいのかを「AiDA」に伝えるため、サイトの種類を選択します。
サイトの名称も入力しておきます。（あとからでも変更可）
その後、ショップ機能を導入するか？など、いくつかの質問に回答すればスタートします。
準備が整うと、以下のような画面になるので「START」ボタンをクリックしましょう。
そして、画面を見ていると…なんと「AiDA」がWebサイトを実際に作っていく様子が表示されるのです！
ただ画面を見ているだけなのに、勝手にどんどんサイトが作られていくのは何だか不思議な感じがします…。
そして、あっという間にサイトが完成して「プレビュー表示」するかを聞かれるので、ボタンをクリックします。
プレビューは、PC・タブレット・スマホに加えて、iOS / Android / windowsのOSを選択することも可能です！
あとは、この画面上でどのようなWebサイトになっているかを確認しましょう。
細かいデザインや配置はあとから自由に編集できるので、まずは大まかなコンセプトが自分のイメージと合っているかをチェックするくらいで良いでしょう。
もし、気に入らなければ「AiDA」が何度でも作り直してくれるので安心です。
作り直す際には、自動でWebサイトを保存してから実行してくれるので、ダッシュボードに戻れば過去に作成したサイトにいつでも戻ることができます。
■Webサイトを編集しよう！
先ほど「AiDA」に作ってもらったWebサイトは完成度が高いので、テキストや画像などを少し変更するだけですぐに利用できるでしょう。
ただ、自分好みに細かく編集できる機能も多く搭載されているので、いくつかピックアップしながらご紹介したいと思います！
例えば、背景を動画にしてみましょう！
そこで、マウスを背景画像に近づけると表示される「BACKGROUND」ボタンをクリックします。
「背景編集エディタ」に変わるので、左メニューの「My Drive」ボタンをクリック！
自分専用の「ファイルエクスプローラー」が表示されるのですが、ここにはなんと無料で使える画像や動画がギッシリと詰まっています！
とりあえず、好きな動画を選んでみましょう。
すると、たったこれだけで背景に動画が挿入されるのです！
とても直感的で分かりやすい操作ではないでしょうか。（もちろん、自分が用意した画像や動画も使えます）
また、いろいろ悩むことも多いWebサイトの「カラー配色」については、あらかじめスタイルセットが用意されているので好きなモノを選ぶだけでOK！
以下のように、ガラッとサイトの印象が変わると思います。
また、左メニューの「FOCUS」から、そのまま使えるテンプレートをドラッグ＆ドロップすることでコンテンツを追加することも可能です！
メンバー紹介やコンタクトフォームなど、ページを構成するパーツがグルーピングされているので便利です。
もちろん、テキスト・画像・ボタン…など、細かいコンテンツを1つずつ追加することもできます。
例えば、画像ギャラリーを追加したければ、「Gallery」アイコンをドラッグ＆ドロップすればOK！
自分の好きなギャラリーのスタイルを選択します。
あとは写真を選ぶだけで、即座にコンテンツが追加されます！
同じ要領で、「Social」アイコンを追加すれば20種類以上のサービスに対応したSNSアイコンも簡単に追加可能！
さらに、「Code」アイコンを使えばHTMLコードをそのまま記述することも出来るので、自分好みのコンテンツを作成することもできます！
他にも、スライドショー・登録フォーム・ファイルのダウンロード・ショップ機能…など、さまざまなコンテンツを自由に追加できるので便利です！
■Webサイトを公開しよう！
ある程度Webサイトが完成したら、実際に公開してみましょう！
方法はとても簡単で、画面下にある「PUBLISH」ボタンをクリックするだけです。
たったコレだけで、公開用のURLが生成されて完了します！
あとは、このURLをシェアすれば誰でも閲覧可能というわけです。
ちなみに、URLの最初の文字列は自分好みに変更することができます。
有料で独自ドメインを利用したり、そのまま好きなドメインを購入して利用することも可能です。
このように「Bookmark」を利用したWeb制作は、誰でも手軽に素早く作ることができてそのまま公開まで完結できる統合エディタと言えるでしょう。
■「Bookmark」のチュートリアルについて！
「Bookmark」は、チュートリアルが豊富に搭載されているのもユニークな特徴の1つです。
例えば、ダッシュボードから利用できる「eラーニングコース」は、Web制作・デザイン・マーケティング・ユーザビリティ…など、本格的な授業を受けることができます。
また、専用のYouTubeチャンネルもあるので、「Bookmark」を使ったサイト制作手法やテクニックなどを動画で学習することもできます。
ちなみに、上記の動画は「Bookmark」のエディタ下部にリンクがあり、利用したい機能を詳しく知ることができるので便利です。
■HTML/CSS講座も公開中！動画でプログラミングが学べるレッスン
paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニング」を公開しています。
Webサイト制作に役立つHTML/CSS入門講座をはじめとして、Python、Java、C言語、PHP、Ruby、SQL、JavaScriptなど、初心者でも動画で学べる入門レッスンが多数ございます。
また、現在paizaラーニングで無料公開しているPython入門編・Java入門編・C#入門編は、10/10（火）から有料講座に変更となります。ぜひ無料の間にごらんください。
■まとめ
今回は、「Bookmark」の基本的な機能について駆け足でご紹介しました！
初心者の方でも今風のWebサイトを簡単に作れるのですが、編集機能が豊富で奥が深いので中級者以上の方にもオススメできるサービスと言えます。
ぜひ、みなさんも「Bookmark」を活用してWebサイトのアイデアをカタチにしてみてはいかがでしょうか！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
