paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

スマホのブラウザ1つでOK!無料でWebサイトを作成&公開できる「Ench」を使ってみた!

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

今回は、スマホのブラウザだけでWebサイトを手軽に構築して公開できる無料のWebサービスをご紹介します。

アプリのインストールは不要なうえ、作業はすべてタップ操作だけ。誰でも直感的にWebサイトを制作できるのが大きな特徴です。これまでWebサイトを作りたいけど諦めていたという人も、手軽に高品質なWebサイトをぜひ作ってみてください!

Ench

f:id:paiza:20200527112804j:plain

■「Ench」の使い方

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

PC・スマホどちらのブラウザでも利用可能ですが、今回はスマホのブラウザを利用します。「Ench」のトップページにアクセスしたら【Start a new page】ボタンをクリックしましょう。

f:id:paiza:20200527112833j:plain


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

f:id:paiza:20200527112924j:plain


登録が完了すると、さまざまな用途に向けたテンプレートが表示されるので好きなものを選択します。

f:id:paiza:20200527113119j:plain

テンプレートには、個人サイト・ポートフォリオ・企業サイト・プロモーションサイト…など、目的に応じて素早くWebサイトを構築できるものがそろっているので便利です。

もちろん、テンプレートを使わずにゼロから好きなように作っていくことも可能です。


テンプレートを選択したら、Webサイトの編集エディタが表示されます!

f:id:paiza:20200527113133j:plain

あとはこのままテキストや画像などを編集したり、テーマカラーやコンテンツのレイアウトなどをカスタマイズできるようになります。

■テンプレートをカスタマイズしよう!

それでは、「Ench」を利用してWebサイトを自分好みにカスタマイズしていきましょう。

さきほどの編集エディタの画面で、任意のテキスト部分をタップするとすぐに編集できるようになります。

f:id:paiza:20200527113153j:plain


文字の編集だけでなく、細かいスタイルの調整もタップ操作で簡単にできるので便利です。

f:id:paiza:20200527113205j:plain

フォント・配置・カラー・装飾…など、基本的なスタイルオプションは一通りあります。


また、画像をタップすると自分の好きなものに変更できます。

f:id:paiza:20200527113217j:plain


手持ちの画像をアップロードしてもよいですし、キーワードからGIFを検索して挿入することも可能です。

f:id:paiza:20200527113301j:plain


画像のスタイル調整もできるので、サイズ・枠線・シャドウ…などを設定して見た目を大きく変化させられます。

f:id:paiza:20200527113315j:plain


また、SNSボタンも手軽に追加できるようになっており、ほとんどのSNSアイコンが標準で提供されています。

f:id:paiza:20200527113326j:plain


以下のようにアイコンのスタイルを変えれば、Webサイトに最適な見た目にできます!

f:id:paiza:20200527113340g:plain

このように「Ench」では、テンプレートをカスタマイズしていくだけで自分好みのWebサイトを素早く構築できるわけです。

しかもすべての作業をスマホのブラウザ1つですぐに始められるので、いつでも好きな場所でWebサイトを作ることが可能になります。

■コンポーネントを追加してみよう!

「Ench」では、テンプレートをカスタマイズするだけでなく、自分でコンポーネントを追加できるように設計されているので合わせてご紹介しておきます。

編集エディタでWebサイトの最下段にスクロールすると、「+」アイコンが表示されているのでタップしてみましょう。

f:id:paiza:20200527113415j:plain

ヘッダー・ボタン・メディア・プロフィール・テキスト・アイコン・フォーム…など、さまざまなコンポーネントが提供されているのが分かります。


例えば、ボタンを追加するとリンクを挿入したり、スタイルなどを細かく調整できます。

f:id:paiza:20200527113429j:plain

自分が持っているブログページへのリンクや、別のサイトに誘導したりなどさまざまな使い方ができるでしょう。


埋め込みコンテンツも利用可能で、リンクを挿入するだけですぐに表示されるようになっています。

f:id:paiza:20200527113441j:plain


この仕組みを使えば、YouTubeの動画やCodePenのプロジェクトなどを手軽に挿入できるわけです。

f:id:paiza:20200527113454j:plain

これらのコンポーネントを活用していけば、テンプレートを大きく変化させることができるでしょう。

■フォームを作ってみよう!

「Ench」のユニークな特徴として、フォームの作成機能が提供されています。これはフォームを作れるだけでなく、Webサイトを公開したときに入力された内容を送受信できる機能も一緒に提供されています。


作り方ですが、まずはフォームのコンポーネントを選択してWebサイトに挿入します。

f:id:paiza:20200527113604j:plain


フィールドを追加してフォームのレイアウトを編集します。(以下はメルマガ登録フォームの例)

f:id:paiza:20200527113617j:plain


たったこれだけで、Webサイトを公開したときに第三者がフォームの内容を送信できるようになっています。

f:id:paiza:20200527113629j:plain


送信された内容を確認するには、編集エディタから「受信ボックス」をチェックするだけです。

f:id:paiza:20200527113640j:plain


詳細内容を確認したり、CSV・PDFなどに書き出すことも可能です。

f:id:paiza:20200527113656j:plain

あまり高度なフォームを作ることはできませんが、たとえば新規Webサービスの早期アクセス者を募集してみたりなど、おもしろい使い方ができるようになっているのでぜひ活用してみましょう。

■Webサイトを公開しよう!

Webサイトが完成したら、さっそくネット上に公開してみましょう!

公開手順は簡単で、画面上部のメニューから【Publish】ボタンをタップするだけです。

f:id:paiza:20200527113744j:plain


【Open page】ボタンをタップすれば、公開済みのWebサイトを閲覧できます!

f:id:paiza:20200527113804j:plain

表示されているURLを友人・知人にシェアすれば、誰でも閲覧できるようになるわけです。また、SNSボタンからWebサイトを手軽にシェアすることもできます。


ちなみに、URLの末尾は任意の文字列に変更可能なので、覚えやすいものに変えておくとよいでしょう。

f:id:paiza:20200527113823j:plain

他にも、簡易的なアナリティクス機能やWebサイトの基本設定をカスタマイズする機能なども提供されています。

「Ench」はアプリなどをインストールする必要がなく、ブラウザからすぐにWebサイトを構築して公開まで完結できるユニークなサービスです。無料で使えるうえ、誰でも直感的に操作できるので自分のWebサイトを作ろうと考えている人はぜひ参考にしてみてください。

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


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

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

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は、スマホのブラウザから簡単にWebサイトを構築できるサービスをご紹介しました。

「Ench」はブラウザ上でWebサイトを構築するわけですが、タップ操作で簡単に作れるような工夫が随所で見られます。まだリリースされたばかりなので、今後のバージョンアップで新機能もいくつか追加されるはずです。

これまでWebサイトを作りたいけど躊躇していた方や、手軽に構築したい方には最適なサービスなのでぜひオリジナルのWebサイトを作って公開してみてください!


<参考リンク>




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

詳しくはこちら
paizaラーニング

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

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

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.