paiza開発日誌

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

logo

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

スマホのブラウザだけで完結するタップ操作のWebサイト作成サービス「mmm.page」を使ってみた!

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

今回は、スマホのブラウザから誰でもすぐにWebサイトを作成できるサービスをご紹介します。

面倒な環境構築やアプリのインストールは一切不要で、スマホの画面をタップ操作していくだけで簡単に個人サイトやポートフォリオページなどをノーコードで作れるのが特徴です。

とにかく手軽にWebサイトを作りたい人には最適なので、ご興味ある方はぜひ参考にしてみてください!

mmm.page

f:id:paiza:20210519135308j:plain

■「mmm.page」の使い方

それでは、「mmm.page」をどのように使えばいいのか詳しく見ていきましょう!

まずはスマホのブラウザでサイトにアクセスして、【SIGN UP】ボタンから無料のユーザー登録をしておきます。

f:id:paiza:20210519135320j:plain


利用可能なメールアドレスを設定しましょう。

f:id:paiza:20210519135329j:plain

登録したメールアドレス宛にログイン用のリンクが送付されるので、クリックするだけで自分のアカウントにログインできます。


初回のみ好きなユーザー名を登録してください。

f:id:paiza:20210519135345j:plain

登録したユーザー名は、これから作成するWebページのURLにも含まれるので注意しておきましょう。


設定が完了すると以下のようなポップアップ画面が表示されるので「ボタン」をタップしてください。

f:id:paiza:20210519135354j:plain


デフォルトではチュートリアル用のサイトが編集できる状態になっているのですが、せっかくなので新規のWebサイトを作成してみましょう。

画面上部にある「+」アイコンをタップしてください。

f:id:paiza:20210519135404j:plain


URLの一部を編集できるので、好きな英文字を入力しておきましょう。

f:id:paiza:20210519135413j:plain


これで新規のWebサイトが表示されます。

f:id:paiza:20210519135423j:plain

あとはこの画面上で自分の好きなようにカスタマイズをしていくことができます。

■Webサイトを作ってみよう!

それでは、「mmm.page」を利用してWebサイトを作成するための基本的な操作方法について見ていきましょう。

最初にデフォルトで配置されているテキスト要素をタップします。すると、メニューが表示されるので削除アイコンをタップします。

f:id:paiza:20210519135438j:plain

これで何もない空白のページになります。


基本的な操作方法は簡単で、画面下部に並んでいるアイコンをタップして必要な要素を画面に貼り付けていくだけです。

f:id:paiza:20210519135449j:plain


たとえば、「テキストアイコン」をタップするとさまざまなフォントを活用した文字を貼り付けていくことができます。

f:id:paiza:20210519135457j:plain

ピンチイン・アウトで文字の大きさや角度も変更可能で、配置の順序やカラーなども細かくカスタマイズできるようになっています。


「ボタンアイコン」をタップすると、SNSボタンやお気に入りのWebサイトに遷移するボタンなどを作れます。

f:id:paiza:20210519135508j:plain

URL以外にも、メールアドレスを入力すれば問い合わせボタンも作れます。


SNSのURLを設定すると最適化されたボタンが自動生成されます。たとえば、TwitterのURLだと以下のようになります。

f:id:paiza:20210519135517j:plain

各種SNSのアイコンやテーマカラーが自動的に適用されるわけです。ちなみに、ボタンに表示されるテキストは編集可能です。


「GIFアイコン」をタップすると「GIPHY」から大量のGIFを検索して貼り付けられるようになります。

f:id:paiza:20210519135526j:plain


キーワードを入力するだけで、以下のような素材が簡単に手に入るので便利です。

f:id:paiza:20210519135538g:plain


「YouTubeアイコン」をタップしてお気に入りの動画URLを設定すれば、YouTubeを手軽に埋め込むこともできます。

f:id:paiza:20210519135642j:plain

動画サイズの変更・回転などもできるので、ちょっと変わった貼り付け方ができてユニークです。


他にも任意の画像を貼り付けたりシェイプを使ったりも可能で、すべての要素を混在させることもできます。

f:id:paiza:20210519135652j:plain

このように、とにかく好きな要素を画面上のどこでもいいのでペタペタと貼り付けていくだけで、自分だけのWebサイトを楽しみながら作っていけるわけです。

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

「mmm.page」では作成したWebサイトを無料でホスティング&公開できる機能も提供されているのでご紹介しておきます。

サイトの編集が完了したら、画面上部に表示されている【PUBLISH】ボタンをタップしてください。

f:id:paiza:20210519135710j:plain


画面下部に表示される【View】ボタンをタップします。

f:id:paiza:20210519135719j:plain


すると公開された自分のWebサイトが別タブで表示されます!

f:id:paiza:20210519135728j:plain

あとはこのURLをSNSやメールなどでシェアすれば、誰でも閲覧できるようになります。

ちなみにサイトを再編集したい場合は、またエディタ画面に戻り編集をしたあとに【PUBLISH】をタップすればすぐに反映されます。

■その他、便利な機能について

「mmm.page」にはいくつか便利な機能が提供されているので、ピックアップしてご紹介しておきます。


まずは「サイト切り替え機能」についてです。

冒頭でも少し触れましたが、画面上部の「+」アイコンをタップすると新規サイトを作成できます。

そこで、「切り替えアイコン」をタップすると、作成した複数のWebサイトを切り替えながら作業ができるようになります。

f:id:paiza:20210519135800j:plain


サイトを切り替えるには任意の名称を選択するだけです。

f:id:paiza:20210519135810j:plain


「テーマカラー自動生成機能」も提供されており、これはサルのアイコンをタップするだけです。

f:id:paiza:20210519135825j:plain


タップするごとにテーマカラーを自動的に生成&適用してくれるのです。

f:id:paiza:20210519135837j:plain

この機能はデフォルトで用意されているmainページで利用可能で、背景色はもちろんのことテキストやシェイプ画像なども最適なカラーが自動生成されるので便利です。


また「PCモード」も用意されているので、スマホだけでなくPCのブラウザからでもWebサイトを作成できるようになっています。

f:id:paiza:20210519135848j:plain


PCの場合は要素をマウスでドラッグする際に、スマホだと表示されない領域が確認できるように工夫されています。

f:id:paiza:20210519135856j:plain

PC・スマホの両方に対応したWebサイトを作る場合に活用するといいでしょう。

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


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

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

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


■まとめ

今回はスマホの画面をタップしていくだけで誰でも簡単にWebサイトを作成できるサービスについてご紹介しました。

まだリリースされたばかりのサービスなので、今後も積極的にアップデートや新機能の追加が行われていく予定です。また、Discordのコミュニティも活発に意見交換されているので、ご興味ある方は参加してみてはいかがでしょうか。

これから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.