どうも、まさとらん（@0310lan）です！
今回は、ドラッグ&ドロップだけで、誰でも手軽に個性的なWebサイトを作成できる無料のWebサービスをご紹介します！
まるでスライド資料を作成しているような、直感的な操作感覚が特徴です。テキストやボタンだけでなく、インタラクティブなコンテンツもペタペタと貼り付けていくだけで完成します。
自分のイメージしているWebサイトを素早く作れるので、ご興味ある方はぜひ参考にしてください！
【 Poxi 】
■「Poxi」の使い方！
それでは、「Poxi」をどのように使えばよいか詳しく見ていきましょう！
まずは、サイト上部にある「Sign in」ボタンをクリックして、無料のユーザー登録を済ませておきます。
登録方法は簡単で、自分のメールアドレスを入力してボタンをクリックするだけです。
設定したメールアドレス宛に、ログイン用のリンクが届くので、そのリンクをクリックしましょう。
以下のような画面が表示されたら準備はOKです！
この画面から新規のWebサイトを作成したり管理ができるように設計されています。
■「Poxi」で作られたWebサイト事例！
基本的な使い方を解説する前に、すでに「Poxi」を利用して作られたWebサイトを見ながら、どんなWebサイトが作れるのかを見てみましょう。
まずは、「GIF」を効果的に活用したWebサイト。
「Poxi」には「GIPHY」と連携したGIFアニメーションのライブラリが搭載されており、Webサイトに効果的なアクセントを手軽に追加できるように設計されています。
こちらはGIFに加えて「iframe」も活用した例。
他のWebサイトやブログなどを「iframe」としてドラッグ＆ドロップで簡単に埋め込める機能を利用しています。
Webサイトのテーマを変更できる事例。
「Poxi」は、デフォルトでテーマカラーを変更できる機能が搭載されています。この機能をインタラクティブに使って、ユーザーが操作できるのも大きな特徴でしょう。
さらに、自作のプログラムも追加可能です。
たとえば、以下のサイトはボタンをクリックするたびに、「猫」の画像を表示するWebサイトの例です。
基本的なHTML / CSS / JavaScriptを利用できる機能があるので、静的なWebサイトだけでなく、ユニークなWebアプリも開発できるというわけです。
■「Poxi」の基本的な機能紹介！
ここからは、「Poxi」に搭載されている機能を利用して、Webコンテンツを作成する方法についてご紹介していきます。
まずは、新規のWebサイトを作ってみましょう！
画面左上にあるオプションをクリックしてください。
【New page】を選択します。
新規のWebサイト作成画面が表示されました。
この画面上に、さまざまなコンテンツをペタペタと貼り付けていくような感覚で、Webサイトを作れるのが特徴です。
中央に見えている「緑色の枠線」は、スマホの画面で見える範囲を意味しています。この範囲は、自由にサイズを変更することもできます。
基本的なテキストの編集をしてみましょう。
デフォルトで表示されているテキスト部分を選択すると、その下部と画面右側に、編集するためのプロパティが表示されます。
テキストのサイズ調整・回転・カラーなどを編集できますし、Google Fontsから日本語を含めた多種多様なフォントも選択可能です。画面左側のメニューから「Text」を選択すれば、新しいテキスト要素の追加もできます。
同じくメニューから「Draw」を選択すると、フリーハンドで好きな線を描画できる機能もあります。
GIFや動画にラクガキをすることも可能で、使い方次第ではユニークなコンテンツが作れるでしょう。
「Sticker」を選択すると、さまざまなGIFアニメーションを追加できます。
キーワード検索から目的のGIFを探したり、タグを選んで絞り込んだりすることも可能です。
GIFも拡大・縮小・回転などが可能で、任意のリンクを埋め込むような機能もあります。
メニューから「Theme」を選択すると、最適化された複数のテーマカラーを選択できます。
1クリックでWebサイトの印象が大きく変わるので、気に入ったものが見つかるまで試してみましょう。また、後述する「Apps」機能を使うと、テーマの変更機能をWebサイトに組み込むことも可能です。
他にも、画像・動画・音楽・PDFなどのファイルをアップロードして、Webサイトに埋め込む機能も提供されています。
ちなみに、すべてのコンテンツはプロパティ画面下部にあるオプションを切り替えることで、さらに詳細なテーマ変更やエフェクトなども追加できます。
■「Apps」機能を使ってみよう！
「Poxi」には、誰でも手軽にユニークなWebサイトを作れるように、便利な機能をドラッグ＆ドロップだけで追加できる「Apps」という機能があります。
さまざまな機能を持った、ウィジェットのような感覚で利用できるので便利です。
現在も新しい「Apps」が開発＆追加されており、今後もさまざまな機能を手軽に利用できるのが魅力的です。
たとえば、「link」をドラッグ＆ドロップしてみましょう。
任意のURLを設定します。
今回は、試しにTwitterのURLを使ってみましょう。
すると、Twitterのアイコンとテキストが自動付与された状態でリンクを生成してくれます。
（※任意のテキストやアイコンに変更可）
同じように、今度は「button link」をドラッグ＆ドロップしてみましょう。
再度TwitterのURLを設定すると、「link」と同じくアイコンとテキストが自動付与されたボタンが生成されます。
この機能を使えば、手軽にSNSリンクなどを作ることができるわけです。
また、「markdown text」をドラッグ＆ドロップしてみてください。
これは、マークダウン形式で文章を書ける機能を提供してくれます。
素早く長文を作成したい場合に便利ですね。
今度は、「embeds」というフォルダをクリックしてみましょう。
さまざまな埋め込み用コンテンツを手軽に追加できる、「Apps」が提供されているのが分かります。
たとえば、YouTube動画、Spotiy、Googleマップなどを素早く追加できます。
もちろんSNSのコンテンツや、Shopifyのサイト、Googleカレンダーなども簡単に埋め込むことができるので便利です。
「tools」フォルダ内には、タスク管理やタイマーなどのミニツールが提供されています。
おもしろいのは、「custom code」という「Apps」が提供されている点です。
これは文字通り、HTML / CSS / JavaScriptを利用して、自作のプログラムを実行できる機能を提供しているのです。
これにより、デフォルトで提供されていない「Apps」を自分で作って公開できるわけです。
JavaScriptを書ける人であれば、さまざまな外部APIを利用して、インタラクティブなWebアプリも開発できるので便利でしょう。
■「Poxi」のWebサイトを公開しよう！
「Poxi」には、Webサイトを公開できる機能があるので合わせてご紹介しておきます。
方法は簡単で、画面上部にある「Publish」ボタンをクリックしてスイッチをONにするだけです。
公開されたら、専用のURLが生成されます。
あとは、このURLをSNSなどを利用してシェアすればいいですね。（※URL末尾は任意の英数字で編集可能です）
また、エディタの左上にあるオプションから、Webサイトの基本設定も編集できます。
Webサイトのファビコンや概要、シェアされた時に表示する画像の設定などが可能です。
スマホでできる謎解きゲーム『IT謎解き2』を公開！
『IT謎解き』の第二弾となる『IT謎解き2』は、全問paiza完全オリジナルの謎解きゲームです。
IT謎解きは、IT業界で活躍するために必要となる発想力・推理力・分析力・耐久力などを問う新感覚謎解きです。今回は、「ゲーム世界からの脱出」というテーマでIT業界力・IT知識を問う謎を出題しています。
みなさんのITに関する知識、分析力や論理的思考力などを駆使して、ぜひチャレンジしてみてください。
詳しくはこちら
■まとめ
今回は、パワポ感覚の直感的な操作で誰でも手軽にWebサイトを作成できるサービスをご紹介しました！
類似のノーコードサービスに比べて、誰でも扱いやすいシンプルなUIが印象的でした。まだまだ開発中の機能もあり、アップデートが随時行われている最中ですが、すべての機能を無料で提供しているので、興味ある方は試しに触ってみてください。
オリジナリティ溢れるWebサイトを作って、シェアしてみてはいかがでしょうか。
＜参考リンク＞
・「Poxi」公式サイト
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
