MENU

コラム

【applimo】ノーコードでアプリを作ってみた

2022/06/08 アプリ

最近、巷で話題を呼んでいるらしい「ノーコード」

 

この記事では、文系大学生・プログラミング経験なしのインターンの私がノーコードサービス「applimo」を使ってアプリを完成させるまでのプロセスをご紹介します!

 

・ノーコードでアプリを作るイメージが湧かない…

・本当に知識なし&スキルなしでアプリが作れるの?

・そもそもノーコードって何?「applimo」ってどんなサービス?

 

という疑問をお持ちの方の参考になれば幸いです。

ノーコードとは

  • プログラミングの知識やスキルがなくてもWebサイトを構築したり、Webアプリケーションを開発できるサービス。ITエンジニア不足の昨今において、非IT人材でもデジタル化を進められる技術として注目を集める。

 

通常、システムやアプリの開発、Webサイトの制作には、プログラミング言語を使って、ソースコードと呼ばれるコンピュータプログラムを書くことが必須です。

 

しかし、ノーコードはソースコードを書く必要がありません!そのため、低価格で高速に開発することが可能です。

代表的なノーコードサービス

一口に「ノーコード」と言っても、種類によって実現できることが異なります。目的に合ったノーコードサービスを選ぶことが重要です。

 

代表的なノーコードサービスは主に以下の4つに分類できます。

  • システム開発
    Glide, bubble
  • 業務効率化
    Zapier, Airtable, Microsoft Power Platform 
  • Webサイト制作
    WordPress, STUDIO 
  • アプリ開発
    Yappli, buildbox

ノーコードでアプリを作ってみたい!

アプリモとは

今回はアプリ開発を目的にノーコードサービス「applimo」を使用します。

今回アプリを作る人

ここで、ざっくりと「作る人」(筆者)の基本情報です。

  • 文系大学生
  • 新潟県在住
  • プログラミング経験なし
  • HTMLとCSSを少しかじったことがあるものの途中で挫折…
  • WordPress経験あり

 

ご覧の通り、IT関連にめっぽう暗い人です。なんだか先が思いやられますが、一体アプリは完成するのでしょうか…

applimoって何?

アプリモとは

applimo(アプリモ)はドコドア株式会社が開発したアプリ開発のノーコードサービスです。

 

「だれでも。どこでも。すべてをアプリに、」できるツール

  • だれでも
    初期費用0円〜、プログラミングの知識&スキル不要、個人から大企業まで
  • どこでも
    iOS対応、Android対応、多言語/世界中に対応
  • すべてを
    あらゆる業種のDX(デジタルトランスフォーメーション*1)、マーケティング、RPA(作業効率化)
    *1 デジタル技術による生活やビジネスのより良い変革のこと。

 

【applimoの5つの特徴】

applimoには大きく分けて5つの特徴があります。

1. いろんな機能が使える
 予約、スタンプ、クーポン、ニュース、アンケートなどなど…
 デリバリー、会員証、ECなど新機能も続々リリース中!

2. かんたんデザイン
  レイアウトは10種類の中から選択するだけ!
  アイコンや写真を入れ替えればあっという間にオリジナルデザインが完成

3. いろんなものと連携
  WebView機能でWebサイトや会員制サイトと簡単に連携可能!

4. いろんなプッシュ通知
  誕生日、性別、予約した日など、様々なタイプの予約・一括配信で狙ったお客様にアプローチ

5. 小学5年生でも使える*2
  画像の選択とテキスト入力のみで完成させられるシンプルな仕様
     *2 実際に小学5年生がアプリモでアプリを作れたそう…!

作業画面(アプリアイコン)

 

【活用事例、導入事例】

・「FOODBUZZ」飲食店検索サービス

・「株式会社ホームサポート」住宅の情報サービス

・「湘北短期大学」受験生向け情報サービス など

今回つくるアプリ

「applimo」を使えば、おしゃれで多機能なアプリをとにかく簡単に作れることが分かりました。

 

……なんでも作れそう!☆

 

安直な考えを抱いた筆者、せっかくなら社会の「負」の部分に目を向けた役立つアプリを作りたい!と思考を巡らせました。

 

〜1週間後〜

 

ワクワクしながら考えたアプリ案がこちら ↓

「留学生&在留外国人向けの生活情報アプリ」を作ろう!

ターゲット:新潟県の大学周辺で生活している or 滞在を予定している留学生&在留外国人
目的:日本語があまり堪能ではない留学生や在留外国人の生活支援
実装する機能・用途:ニュース、写真ギャラリー、ムービー、多言語

  • ニュース
    スーパーなどのお店や公共交通機関の案内、ゴミ出しやアパートの水回りのマナーなどの情報、地域の情報を発信。
  • 写真ギャラリー
    大学周辺の日常風景を投稿。
  • ムービー
    大学生のvlogなどを投稿。
  • 多言語
    新潟県は中国、韓国をはじめとしてベトナムやフィリピン、インドネシアなどからの在留外国人が多い。英語だけでなく様々な言語への対応が必要。

 

筆者は大学2年〜3年次に長期留学を計画していました。

滞在予定の街の情報収集をしていると、観光の情報にはたくさんアクセスできるのに、生活の情報はなかなか見当たらない…という事態に陥りました。(特に都市部から離れた地方の情報は本当に少ない!)

この経験から、地方の大学周辺にスポットを当てた生活情報アプリを作ることにしました。

いざ実践!

素材集め

素材リスト

まずは素材集めから!

 

必要なもの

・メニューアイコン*3(jpeg/jpg/gif/png 30×30px)

・スライド画像*4(jpeg/jpg/gif/png 640×320px)

・バナー(レイアウトによって異なる)

・ヘッダー(jpeg/jpg/gif/png 640×84px)

・アプリアイコン*5(png 1024×1024px)

・スプラッシュ*6(png 1284×2778px

・ニュースに使う記事

・ギャラリーに使う写真

・ムービーに使う動画
*3 アプリ内で表示されるコンテンツメニューのアイコン
*4 アプリ内トップに表示される画像
*5 デバイスの画面で表示されるアプリのアイコン
*6 
アプリを起動してからトップ画面が表示されるまでの一瞬の間に表示される画像 

 

メニューアイコン、スライド画像、バナーはアプリモが配布している素材リストから選択できます

筆者はスライド画像、バナーは自分で作ることに、メニューアイコンのみ素材リストから選ぶことに決定。


 
素材リストは、
「アプリモ手順書」⓪最初に- 契約から納品の流れ → ③素材準備 → デザインデータ一式はこちら
にリンクが貼ってあります。素材リストには、他にクーポン、スタンプなどの機能で使える画像が用意されています。


筆者はアプリアイコン、ヘッダー、バナーをCanvaで作りました。無料で使えて、テンプレートも豊富に用意されているので、初心者でも簡単にデザインできます。おすすめです!

 

注意:バナーの画像もアプリモが配布しているデザインデータを使おうと思ってましたが、用意されていたのはニュースだけでした…!いずれにしても筆者は、スライド画像の雰囲気とバナーの雰囲気を合わせたいと思っていたので結果的には良かったです。

注意:画像を作る場合はサイズを確認しておきましょう!画像のサイズが合っていないと、画質が落ちてしまったり、綺麗に表示されなかったりします。特にレイアウトによってサイズが異なるバナーは要注意です!


ここから「アプリ構築マニュアルを見ながら進めていきます。

「アプリ構築マニュアル」は
「アプリモ手順書」⓪最初に- 契約から納品の流れ → ⑤デザイン・アプリ構築
にリンクが貼ってあります。

 

applimoの管理画面にログインしたら、いよいよアプリの作成です!基本的には「アプリ構築マニュアル」に沿って進めていけば問題ありません。

ここではポイントとなるところを抽出しつつ作業の流れを確認していきます。

トップメニュー

作業画面(トップメニュー)

・アプリのハンバーガーメニューやフッターに表示される機能を登録

・メニューアイコンには1.で素材リストから選んだアイコンを設定

レイアウト

作業画面(レイアウト)

10種類の中から選ぶ

 

筆者の条件

1. スライド画像を大きく表示したい
2. 機能が多くないためバナーが少ないものにしたい
3. 記事の投稿をコンテンツのメインにしたい

→⑩のレイアウトに決定

 

・TOPに表示させたい投稿コンテンツの記事数を決められる

→条件3よりTOPに記事をたくさん表示させたいが、多すぎても見にくいので5つに決定

スライド画像

作業画面(スライド画像)

・マニュアルの通りに設定していくだけで完成!

バナー

作業画面(バナー)

・レイアウトに応じたA〜Gのバナー画像を設定

→筆者はバナー「F」が表示されるレイアウトを選んだので「バナー設定F」で設定

ヘッダー/アプリアイコン

作業画面(ヘッダー)

・マニュアルの通りに設定していくだけで完成!

共通カラー/スプラッシュ

作業画面(共通カラー)

・好きな色をポチポチ選ぶだけでOK!自分で色を作ることもできます。

フォトギャラリー/ムービー

作業画面(フォトギャラリー)

・マニュアルの通りに設定していくだけで完成!

 

注意:ムービーはYouTubeにアップロードされている動画に限ります。

投稿コンテンツ

作業画面(投稿コンテンツ)

・記事の本文を書く欄はGoogleドキュメントと同じような感じ

・記事としての見やすさはフォントやサイズ、色などで工夫する

・筆者は使わなかったが、サムネイルとは別に本文にも画像を挿入できるらしい

 

注意:絵文字は使えない or 大きく表示されてしまう

まとめ

applimoでアプリを作るときに重要なこと

ついに完成!!!アプリを作れました!!!

 

他の機能についても「アプリ構築マニュアル」を見る限り、指示に従ってデータを入力するだけで簡単に作成できそうでした。

 

意外に重要なことは「素材集め」です。素材が準備不足で、後からあれもこれもと追加して作成すると時間がかかります。反対にサイズの合っている素材さえ十分に用意してあれば、あとはマニュアルに従って素材を差し込むだけでとても簡単です!

次回予告

ここまでノーコードサービス「applimo」を使ってアプリを完成させるまでのプロセスをご紹介してきました。

 

いかがだったでしょうか??

「applimo」を使えば、プログラミングの知識やスキルがなくても、簡単にアプリを作ることができました!

 

しかし、これはまだ「作っただけ」の段階です。アプリを実際に使用するには、デベロッパー登録とストア申請が必要になります。

 

ということで、次回はアプリを使えるようになるまでのプロセスをご紹介します!

筆者が作ったアプリは動かすことができるのか…

 

ぜひこちらもご覧ください!

 

新着情報

関連記事