<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/1e4dbd4e863c4652a3c453c9b11f07df/undraw_Aircraft_re_m05i%20(1).png" alt=""><br><br>こんにちは、<a href="https://terupro.net/profile/" target="_blank" rel="noopener noreferrer">テルプロ</a>です！<br><strong>「将来は海外で働くことに興味があるけど...」</strong>とお悩みではないでしょうか。<br><br>テルプロ<br>本記事ではそんな悩みを解決していきます！<br>本記事を読むことで</p><ol><li><strong>ベトナムのIT企業で働いた筆者の体験談を知れる</strong></li><li> <strong>「海外で働く」ことに対する大学生目線の視点がわかる</strong></li></ol><p><br></p><h2 id="hc3a995602f">どんな会社で働いたの？</h2><p><br><strong>私が参加したのは、ベトナムのホーチミンにあるIT企業です。日本人が5人、ベトナム人が25人の比較的小さなWeb開発会社でした。</strong><br>私はこの会社で、大学4年の7月〜9月までの丸3ヶ月間、週5/8時間（月〜金）のフルタイムで働かせていただきました。<br>今回は、大学生である私が実際に海外で働いてみて感じたことをまとめていきます。<br><strong>▼</strong>具体的な仕事内容について知りたい方は以下の記事をご覧ください。<br>https://terupro.net/internship-abroad</p><h2 id="hc3051486c2">大学生がベトナムIT企業のインターンで感じたこと</h2><p>まず、海外で働いてみて強く感じたことは<strong>「海外で働く=海外に住む」</strong>ということです。<br>渡航前は、仕事のことばかり考えていましたが、実際に現地に来てみると、仕事よりも生活の方がよっぽどインパクトがあり刺激的でした。<br>海外で働きたいという思いだけで就職先を決めてしまうと、その国の文化や環境に慣れずに苦しむ可能性はかなり高いです。<br>海外で働く場合は<strong>「その国のことを知る」</strong>ことから始めることが大事だと感じました。<br>そこで今回は、特に印象的だった以下の4つエピソードをご紹介します。</p><ol><li><strong>海外に住む上で物価は超重要</strong></li><li> <strong>日本人は周りの目を気にする傾向にある</strong></li><li> <strong>言語が持つ絶大な力</strong></li><li> <strong>働くために生きるではなく生きるために働く</strong></li></ol><p>それでは早速、参りましょう。</p><h3 id="h2dced0ad6d">海外に住む上で物価は超重要</h3><p><br><strong>ベトナムは、基本的に日本に比べて物価が安いです。</strong><br>屋台だとバインミーと呼ばれるサンドイッチ(150〜200円)、お店だとフォーと呼ばれる麺料理(250〜500円)で食べられます。<br>海外で住む上で「物価」は、メンタル面に大きな影響を及ぼします。お金の心配をしていれば、余裕がなくなり、日常生活を楽しめなくなってしまうからです。<br>その点ベトナムは物価が安いため、お金の面を気にする事なく過ごすことなく、仕事やプライベートの時間を過ごすことができました。<br>そのため、実質インターンシップ全体でかかった費用は、渡航費のみです。欧米などのインターンシップに比べると、かなり安上がりで貴重な体験ができますね。<br>とはいえ今は円安。ホーチミン市の中心部に行くと、物価は日本と変わりません。</p><h3 id="hf59034b546">日本人は周りの目を気にする傾向にある</h3><p><br><strong>ベトナム人は、常に自分にとって心地よい選択をします。</strong><br>私は毎週末、現地の大学の日本語クラブに参加していました。そこでは、日本人と日本に興味のあるベトナム人が交流をするために様々なイベントが行われます<br>ベトナムの大学生は、洋服に気を遣いすぎず、化粧をしない人もいます。もちろん人によりますが、自分にとって心地よい選択をしている人がほとんどでした。<br>私は東京の大学に通っていますが、化粧をしていない女性を見ることは滅多にありませんし、互いにどんな服を着ているのかを気にしています。<br>そういった点を踏まえ、日本人は周りの目を気にする人が多いと感じました。</p><h3 id="hb2d56f3e84">言語が持つ絶大な力</h3><p><br><strong>言語は単なるコミュニケーションツールですが、あまりにも大きな力を持ちます。</strong><br>これは現地のスーパーでの出来事です。<br>私はレジの前で、会計の仕方がわからず大汗を掻く日本人を見かけました。ベトナムは通貨の桁が多いので、お金が足りないと勘違いしてしまっていたようです。<br>そこで私は、日本語で声をかけました。すると、一瞬にしてホッとした表情。<br>私はこの時、自分が知っている言語を聞くだけで、人の顔色はここまで変わるのかと驚きました。言語が話せるだけで、人は相手を味方だと認識するということです。<br>言語の持つ価値を再確認した体験でした。<br>ちなみにベトナムでは、日本語が話せるだけで給料が倍になります。こういった点を踏まえても、外国語の習得は、自分の可能性を大きく広げる手段だと感じました。</p><h3 id="ha3613e41f1">生活するために働く</h3><p><br><em>「Live for work or Work for live」</em><br>この言葉は、海外と日本の働き方の違いの話をする際によく登場してきます。<br>私が最も衝撃を受けたのは、カフェの定員さんがスマホをいじっていて、お客さんが声をかけているのに気づかず、お客さんが店に入るのを諦めるというシーンです。<br>ぼーっとみていましたが、これって日本じゃ普通じゃないよなと思いました。<br>私は日本の会社で3社インターンをしたことがありますが、ベトナムと日本では全く働くことに対する考え方が違うなと感じています。<br>ビジネスチャットでは、面白い絵文字やGifを使ったりして楽しみながら働きます。日本のようなはっきりとした上下関係というものはありません。<br>そして、毎週誰かしらが風邪や家の事情で休み、仕事が終われば定時で帰宅します。<br>勤務時間はメリハリを持って楽しみながら働き、プライベートを大切にする。このような働くことに対する認識の違いを身をもって体感しました。</p><h2 id="ha214098e44">まとめ</h2><p><strong>今回は「ベトナムIT企業での海外インターンシップ体験談」についてまとめました。</strong><br>3ヶ月という短い期間ではありましたが、実際に現地で生活をしてみることで「海外で働く」とはどういうことかを身をもって体感することができました。<br>今は便利な時代で、Youtubeを見れば多くの役立つ情報が得られます。<br>しかし、「<strong>百聞は一見にしかず</strong>」という言葉があるように、この感覚は実際に現地で自分の目で確かめてみないと分かりません。<br>私自身、渡航前と渡航後では、ベトナムの印象が180度変わりました。<br>もし海外で働くことに興味が少しでもある学生は、間違いなく学生のうちに海外で働く経験をすることをおすすめします！<br>本記事が少しでも参考になっていれば幸いです。<br>最後までご覧いただきありがとうございました。ではまた！</p>

【大学生は一度海外を見るべき】ベトナムIT企業のインターンで感じたこと

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/c3615df820b34bebbc5e696148e3dd37/Frame-5549-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="h9f0848f65d">FunDevとは？</h3><p>FunDevとは、アプリ開発者のための情報メディアです。<br>アプリ開発を学びたい学生から、プロの開発者になることを目指す社会人まで、幅広いターゲット層に対して、開発の「楽しさ」を伝えることを目指しています。<br><strong>基本情報</strong><br>名前FunDev - アプリ開発者のためのメディアリリース日2023年5月10日作成期間3週間役割メディア運営（開発 / デザイン / ライティング / マーケティング）URL<a href="https://fundev.jp/" target="_blank" rel="noopener noreferrer">https://fundev.jp/</a><br><strong>技術スタック</strong><br>言語HTML / CSS / JavaScript / PHPCMSWordPressデザイン Figma / Canva</p><h3 id="h8244ebc47d">FunDevの特徴</h3><p><br><strong>開発者目線のコンテンツが満載！</strong><br><strong>専門的な情報をわかりやすく解説</strong><br><br><br><strong>画像付きの解説で理解しやすい</strong></p><h3 id="h231a3a2de9">実際のイメージ</h3><p><br></p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアの発端は「エンジニア = 高収入 」というイメージによって「収入を上げるためには、プログラミングを学ぶべき」という世の風潮に疑問を感じたことです。<br>現代社会は、インターネットが産業の中心になっていることもあり、プログラミングを学ぶことでシステムに関する理解が深まり、キャリアに大きな恩恵をもたらします。<br>そのため、現代において、プログラミングを学ぶことは素晴らしいことです。<br>ですが、あまりにもキャリアのためにプログラミングを学ぼうとする意識を持っている人が多いのではないかと私は思います。<br>プログラミングをしてアプリやサイトを作ることは「創造的で楽しいこと」です。この本来の魅力を伝えるべく、FunDevと名付けたこのメディアを立ち上げました。</p><h3 id="ha88dc2a453">ゴール</h3><p>アプリ開発を学びたい学生から、プロの開発者になることを目指す社会人まで、幅広いターゲット層に対して、開発の「楽しさ」を伝えること。</p><h2 id="hb685e3bedc">実績</h2><h3 id="h08adfcf89b">データ</h3><p>記事数52記事月間PV数2000PV月間ユーザー数900人ユーザー属性（国）5カ国月間収益-合計収益-<br>※2023年10月10日現在</p><h3 id="ha4e2f67a7d">読者の声</h3><p>集計中です。</p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>今回のメディア開設を通して、目的意識の重要性を改めて感じました。<br>このようなメディアを立ち上げるためには、費用だけでなく大きな労力と時間が掛かります。そのため、普段の怠惰な自分であれば、面倒で開設していなかったと思います。<br>ですが今回、「開発の楽しさを伝えたい」という目的意識を最初から一貫して持てたことで、立ち上げから読者の流入の安定までスムーズに持っていくことができました。</p><h3 id="h1c43723b67">今後に生かすこと</h3><p>まだ開設して半年ということもあり、記事も読者も多くありません。そのため今後は、メディアをより良くしていくために、開発者目線の良質な情報を届けていきます。<br>私が運営するブログ「<a href="https://terupro.net/" target="_blank" rel="noopener noreferrer">TERUPRO</a>」を超すようなメディアにしていきたいです。</p>

FunDev｜Webメディア

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/481d9924bcd6422f83fbf357418446c2/Frame-5538-4-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="h006f0ba424">AIChatsとは？</h3><p>AIChatsは「AIと話せる、最先端のチャットアプリ」です。<br>最新の人工知能「GPT-3.5 Turbo」を搭載しており、AIが会話相手になって悩みや質問に答えます。使いやすいインターフェイスで、日常のあらゆるシーンで活躍します。<br>AIチャットなので、意味が伝わるように「AIChats」と名付けました。複数形なのは、ユーザーとAIとの対話がリアルな会話に繋がることを期待しているためです。<br>カラーはシンプルに黒と白、アクセントに青味がかったグレーを採用しました。テーマに関わらず、目に負担が掛かりにくい色を選びました。<br><strong>基本情報</strong><br>名前AIChats｜人工知能チャットアプリ 日本語版リリース日2023年4月27日作成期間1ヶ月役割UI/UXデザイン / 開発 / マーケティングURLAppStore（<a href="https://onl.bz/3tQXG7k" target="_blank" rel="noopener noreferrer">https://onl.bz/3tQXG7k</a>）<br><strong>技術スタック</strong><br>デザインFigma言語Dart（Flutter）アーキテクチャレイヤードアーキテクチャデータ管理Shared Preferences外部サービスRevenueCat</p><h3 id="h983ba2a67f">AIChatsの特徴</h3><p><br><strong>シンプルで親しみのあるデザイン</strong><br><strong>会話型AIがあなたの悩みや質問に答えます</strong><br><br><br><strong>音声入力対応！手間なく入力できる</strong><br><strong>マルチテーマ対応！環境に合わせて選択できる</strong><br></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>【操作の説明】<br> ①アプリの紹介（初回のみ）<br> ②フリック入力で送信する<br> ③音声入力で送信する<br> ④メニューを確認する<br> ⑤テーマを切り替える</p><h3 id="hc69c85bcf9">背景</h3><p>このアプリは、「AIの進化を開発者として実感したい」という思いや、「既存のAIチャットアプリを参考に、さらに優れたものを作りたい」という願いから生まれました。<br>私がChatGPTに初めて触れたのは、2022年11月。Twitterでエンジニア界隈が盛り上がっているのを見て、その存在を知りました。<br>当時はまだ世間で話題になっていなかったこともあり、私は「こんなに簡単にAIと会話できるんだ」とサービスの外側に対して関心を持っていました。<br>しかし、テレビやマスメディアが次々と取り上げる中で、サービスの内側である人工知能がいかに優れているのかに気付かされました。<br>実際、マイクロソフトの創設者であるビル・ゲイツ氏も、ChatGPTをインターネットの発明と同じくらい重要だと評価しています。<br>このような歴史を変える技術を自分の手で触れたいと思い、今回のアプリを開発することを決めました。</p><h3 id="ha88dc2a453">ゴール</h3><p>人工知能を活用して、ユーザーが効率的に情報を得たり、問題解決をサポートしたり、コミュニケーションを円滑に進められるようにすること。<br>要するに「人工知能の力でユーザーの日常をもっと快適にする」ということ。</p><h2 id="h0b0d08b338">企画</h2><h3 id="ha18f335127">ペルソナ設定</h3><p>既存のAIチャットアプリのレビューを参考に、ユーザーが抱える不満を洗い出しました。そこで浮かび上がった共通のお悩みとニーズに基づいてペルソナを作成しました。<br></p><h3 id="h2524076a8b">価値仮説</h3><p>今回のアプリの本質的な価値としては、ユーザーの日常をもっと快適にすることにあります。あくまでAIとのチャットは、それを支える手段でしかありません。<br>そのため、この作業をノーストレスで行えることを軸にサービス設計しました。<br></p><h3 id="h3aa3c5f4a1">競合分析</h3><p>AIチャットアプリを制作する上で、競合となるアプリを調査しました。<br>その結果、デザインのバランスが取れていないアプリが多いこと。AIが自然な会話をしてくれないアプリが多いこと。この２点が調査から分かりました。<br>ここから、会話型アシスタントとして最適化されたAIを組み込み、なおかつデザイン性に優れているアプリを作れば、競合優位性を生み出せると考えました。<br></p><h3 id="h6ea01fc821">提供価値</h3><p>ペルソナや競合分析の内容を下に、今回のアプリのコア機能を２つ作成することを決めました。コア機能は「スムーズな会話ができるAIを搭載すること」と「チャットを楽しめること」です。<br></p><h2 id="hf2d7d3b8fc">情報設計</h2><h3 id="h1c9fe6ed01">オブジェクト抽出</h3><p>企画で整理した内容を下に、ユーザーのサービス体験フローを物語形式で整理しました。その中で、登場するオブジェクト（名詞）を洗い出していきました。<br></p><h3 id="h006c79229a">ワイヤーフレーム</h3><p>抽出したオブジェクトを下に、ワイヤフレームを作成していきます。修正することを前提になるべく早く形にし、ブラッシュアップしていきました。<br>主なポイントは「会話を楽しめる設計」にすることでした。そのために、会話してる感が伝わるような形に仕上げました。<br></p><h2 id="h8c061cf219">表現</h2><p>ワイヤフレームがある程度できたら、今度は見栄えを整理していきます。主なポイントは、会話に集中できるような、シンプルで親しみのある配色にすることでした。<br>ベースはシンプルに黒と白、アクセントに青味がかったグレーを採用しました。テーマに関わらず、目に負担が掛かりにくく、白と黒とマッチする色を選びました。<br></p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>AIチャットは既に多くリリースされていたので、それらの良いところを掻い摘んでアプリを制作しました。「何が必要で」「何がいらないのか」を考え、ユーザーにストレスを与えず、快適に使えるようなデザインを形にすることに苦労しました。<br>最終的には、チャットを楽しめるような親しみのある雰囲気を出すために、チャットバブルや入力フォームに丸みを加えました。そして単調になりすぎないように、角張った印象のドロワーを採用することで、締まりを加え、全体のバランスを取りました。<br>開発では、音声入力や課金処理、OpenAIのAPIなど初めて扱う技術が多くあり、とても苦労しました。そこで私をサポートしてくれたのが、ChatGPTです。<br>大まかな箇所は「GPT-3.5 Turbo」細かい箇所は「GPT4」に質問をし、協働でアプリを開発しました。もし彼らのサポートがなければ、アプリは100%完成していません。<br>AIとの対話を繰り返し、その進化を肌で感じた1ヶ月間でした。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>ChatGPTの登場によって、エンジニアは淡々とコーディングするよりも、サービスの根幹を作るためのクリエイティブな仕事に集中できるようになりました。<br>私はプログラミングは苦手ですが、創造力には自信があります。このような私みたいな人でも、AIと協働すればアプリを作れるようになったのは非常に喜ばしいですね。<br>今後もアイデアが浮かんだら、AIと協働して世の中に価値を生み出したいと思います。</p>

AIChats｜スマホアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/ced19440557c4c868ca404176eb88e3e/Frame-5544-1-1-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="h2b17c7a134">マネイズムとは？</h3><p>マネイズムは「収支管理にスマートさを！」をモットーに開発したシンプルかつ実践的な収支管理アプリです。<br>お金を表す「マネー」と流儀を表す「イズム」を合わせて「マネイズム」と名付けました。自分の納得いくやり方でお金を管理して欲しいという思いが込められています。<br>メインカラーは青です。信頼感、価値あるイメージを与えることを目的に選びました。<br><strong>基本情報</strong><br>名前マネイズム｜お金の管理リリース日2022年11月8日作成期間1ヶ月役割UI/UXデザイン / 開発 / マーケティングURLAppStore（<a href="https://apple.co/3hXuRz6" target="_blank" rel="noopener noreferrer">https://apple.co/3hXuRz6</a>）<br><strong>技術スタック</strong><br>デザインFigma言語Swift（SwiftUI）アーキテクチャMVVM（Model View ViewModel）データ管理Core Data</p><h3 id="h791d9bc067">マネイズムの特徴</h3><p><br><strong>シンプルでスタイリッシュなデザイン</strong><br><strong>片手で簡単！スマートに入力できる</strong><br><br><br><strong>月別の統計を一覧で確認できる！</strong><br><strong>履歴の検索も楽々！</strong><br></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>【操作の説明】<br> ①パスコードロック解除（FaceID）<br> ②取引の追加<br> ③月別の収支を確認<br> ④収支の履歴を確認（11/1〜11/17を検索）<br> ⑤収支の削除<br>   </p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、居酒屋でバイトをしている大学の友人であるT君の悩みから生まれました。ファッション好きのT君は、気に入った服があれば即購入するような人間です。<br>そんなT君の悩やみは、気づいたらお金がなくなっているということでした。<br>私はT君に「収支管理とかしてない？」と尋ねると、T君は「銀行のアプリで収支管理してるよ」と答えました。この会話から分かることは、T君は収支管理をしているつもりだけど、実際はできていないということです。<br>T君以外の人はどうなんだろうと思い、新たに5名の友人に収支管理をしているかを尋ねてみました。すると、２人は「銀行のアプリをたまに使っているくらい」で、３人は「銀行のアプリすら入れていない」という結果でした。<br>銀行のアプリを使っている友人に使い心地を聞くと、機能が多くて収支管理に集中できないという意見をもらいました。<br>ここで私は、収支管理に特化したシンプルで実践的なアプリを作ろうと決めました。</p><h3 id="ha88dc2a453">ゴール</h3><p>お金の管理の基礎となる「収入」と「支出」を記録する習慣を作ることで、最低限の金融リテラシーを身に付けること。その結果、お金の悩みを減らすことに繋げる。</p><h2 id="h0b0d08b338">企画</h2><h3 id="ha18f335127">ペルソナ設定</h3><p>大学のボランティアサークルの仲間にインタビューの協力をしてもらい、そこで浮かび上がってきた共通のお悩みとニーズに基づいてペルソナを作成しました。<br></p><h3 id="h2524076a8b">価値仮説</h3><p>今回のアプリの本質的な価値としては、最低限の金融リテラシーと身に付け、お金の悩みを無くすことにあります。あくまで、収支管理は作業でしかありません。<br>そのため、この作業をノーストレスで行えることを軸にサービス設計しました。<br></p><h3 id="h3aa3c5f4a1">競合分析</h3><p>収支管理アプリを制作する上で、競合となるアプリを調査しました。<br>その結果、収支管理に絞らず他の機能を有した多機能アプリが多いこと。収支管理に絞っているが地味なデザインのアプリが多いこと。この２点が調査から分かりました。<br>ここから、収支管理に絞り、なおかつデザイン性に優れているアプリを作れば、競合優位性を生み出せると考えました。<br></p><h3 id="h6ea01fc821">提供価値</h3><p>ペルソナや競合分析の内容を下に、今回のアプリのコア機能を２つ作成することを決めました。コア機能は「収支記録」と「記録管理」です。<br></p><h2 id="hf2d7d3b8fc">情報設計</h2><h3 id="h1c9fe6ed01">オブジェクト抽出</h3><p>企画で整理した内容を下に、ユーザーのサービス体験フローを物語形式で整理しました。その中で、登場するオブジェクト（名詞）を洗い出していきました。<br></p><h3 id="h006c79229a">ワイヤーフレーム</h3><p>抽出したオブジェクトを下に、ワイヤフレームを作成していきます。修正することを前提になるべく早く形にし、ブラッシュアップしていきました。<br>主なポイントは、パッと画面を見たときに「何ができるのか」をユーザーに自然な形で伝える方法を検討することでした。<br></p><h2 id="h8c061cf219">表現</h2><p>ワイヤフレームがある程度できたら、今度は見栄えを整理していきます。主なポイントは、シンプルながらも、使っていてテンションが上がる配色を心掛けることでした。<br>ボーダーは１つの情報になってしまうため、極力使わずに色で階層を表現しました。収支管理がコアのアプリなので、収入と支出の違いを一目で区別できるよう、赤と緑による印象付けを行いました。<br></p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>収支管理アプリはこの世に多くあるため、ビジュアルで違いを生み出すことに最も苦労しました。ユーザーが習慣的に使おうと思えるようなデザインを深く考えていました。<br>最終的には、カードを半分以上しめるような形にして「鮮やかさ」を加えられたと思います。創造性を膨らますために、PinterestやDribbbleに掲載されているデザインを参考にしていました。このアイデアは、Twitter上の有識者のツイートから着想を得ました。<br>開発では、月別やフィルタリングなど、日にちによって表示する数値を変化させる必要があったため、その点が開発の肝でした。そのため、日にちを管理するためのプラグインへの理解を深めることで、開発をスムーズに進められるようにしました。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>必要な機能の選定を効果的にできるようになっていきたいです。<br>今回で言うと、月別の統計だけでなく、週別の統計を選択できるナビがあった方が良かったと感じています。その他にも収支管理をする上で、ユーザーが求める機能はたくさんあるはずです。<br>このようなユーザーが求める機能を理解できるよう、日頃から「この機能があったらいいのでは？」という視点を持ちながら様々なアプリに触れていきたいと思います。</p>

マネイズム｜スマホアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/f4197ddb66a14b979b3826add8d2c1fc/Frame-5546-2-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="h836f2e2cad">TASKSとは？</h3><p>TASKSは「タスク管理にシンプルさを！」をモットーに開発した１画面で使えるタスク管理アプリです。<br>タスク管理アプリなので、意味が伝わるように「TASKS」と名付けました。<br>メインカラーは白と黒です。タスクの色を6色から好みに応じて選択できるようにすることで、シンプルさの中に彩りを加えています。<br>タスクの色は、バランスが整うようにマットな質感のカラーリングを採用しました。<br><strong>基本情報</strong><br>名前TASKS｜タスク管理リリース日2022年11月8日作成期間1ヶ月役割UI/UXデザイン / 開発 / マーケティングURLAppStore（<a href="https://apple.co/3VhR6y5" target="_blank" rel="noopener noreferrer">https://apple.co/3VhR6y5</a>）<br><strong>技術スタック</strong><br>デザインFigma言語Swift（SwiftUI）アーキテクチャMVVM（Model View ViewModel）データ管理Core Data</p><h3 id="he4892dbabb">TASKSの特徴</h3><p><br><strong>シンプルでスタイリッシュなデザイン</strong><br><strong>片手で簡単！スマートに入力できる</strong><br><br><br><strong>タップで「明日以降」のタスクを確認！</strong><br><strong>タップで「完了済み」のタスクを確認！</strong><br><br><br><strong>タップで「未完了」のタスクを確認！</strong></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>【操作の説明】<br> ①タスクの追加ボタンをクリック<br> ②タスク内容を入力する<br> ③追加したタスクを完了する<br> ④今後（明日以降）→ 完了（完了済み）→ 未完（昨日以前）のタスクを確認</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアを思いついたのは、大学３年生の夏に、日本最大級のAIメディアの記事を執筆するライターとして働いていたときのことです。メディアのコラム記事を、私を含めた大学生数十名が役割を分担して運営していました。<br>私たちは、プロジェクトを進行するために「<a href="https://trello.com/ja" target="_blank" rel="noopener noreferrer">Trello</a>」というアプリを利用していました。Trelloは、チームがあらゆるタイプのプロジェクト、ワークフロー、またはタスクの追跡を管理できるようにする視覚的なツールです。<br>私はTrelloの容易な操作性に感銘を受けていました。ドラック&amp;ドロップでタスクを移動できるようにすることで、画面遷移をせずに、１画面でのタスク管理を可能にしていたのです。シンプルなアイデアですが、無駄のない新しいアイデアだと感じました。<br>この容易な操作性をスマホアプリでも再現できれば、必ず価値のあるものができると思い、今回のアプリを作ろうと決めました。</p><h3 id="ha88dc2a453">ゴール</h3><p>タスク管理にシンプルさを与えることで、タスク管理を容易にすること。その結果、タスク管理にかける時間を減らし、より良い時間の使い方ができるようになる。</p><h2 id="h0b0d08b338">企画</h2><h3 id="ha18f335127">ペルソナ設定</h3><p>一緒にメディアを運営していた会社の同僚や上長にインタビューの協力をしてもらい、そこで浮かび上がってきた共通のお悩みとニーズに基づいてペルソナを作成しました。<br></p><h3 id="h2524076a8b">価値仮説</h3><p>今回のアプリの本質的な価値としては、タスクを効率的に管理できるようになることで、より良い時間の使い方ができるようになることにあります。あくまで、タスク管理は作業でしかありません。<br>そのため、この作業をノーストレスで行えることを軸にサービス設計しました。<br></p><h3 id="h3aa3c5f4a1">競合分析</h3><p>タスク管理アプリを制作する上で、競合となるアプリを調査しました。<br>その結果、タスク管理に絞らず、他の機能を有した多機能のアプリが多いこと。タスク管理に絞ったアプリではあるが、テキスト管理のみで、時間や重要度などを管理できるものが少ないこと。この２点が調査から分かりました。<br>ここから、タスク管理に絞り、時間や重要度などの社会人がタスク管理で求める必要最低限の情報を有するアプリを作れば、競合優位性を生み出せると考えました。<br></p><h3 id="h6ea01fc821">提供価値</h3><p>ペルソナや競合分析の内容を下に、今回のアプリのコア機能を2つ作成することを決めました。コア機能は「タスクの編集」と「タスクの分類」です。<br></p><h2 id="hf2d7d3b8fc">情報設計</h2><h3 id="h1c9fe6ed01">オブジェクト抽出</h3><p>企画で整理した内容を下に、ユーザーのサービス体験フローを物語形式で整理しました。その中で、登場するオブジェクト（名詞）を洗い出していきました。<br></p><h3 id="h006c79229a">ワイヤーフレーム</h3><p>抽出したオブジェクトを下に、ワイヤフレームを作成していきます。修正することを前提になるべく早く形にし、ブラッシュアップしていきました。<br>主なポイントは、ユーザーが１画面で容易にタスク管理できる設計にすることでした。設計のベースはシンプルですが、ユーザーにカラーやタイプなどの選択肢を与えることで、使い方の広がる設計になっています。<br></p><h2 id="h8c061cf219">表現</h2><p>ワイヤフレームがある程度できたら、今度は見栄えを整理していきます。主なポイントは、シンプルながらも、使っていてテンションの上がる配色を心掛けることでした。<br>タスクカードの色は、邪魔にならず、なおかつ全体のバランスが整うようにマットな質感のカラーリングを採用しました。<br></p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>Trelloのような操作性を再現することに最も苦労しました。結果的に、少し異なるものの１画面で容易に操作できるタスク管理アプリに仕上がったと思います。<br>シンプルさの中に彩りを加えるにはどうすれば良いのかを常に考えていましたが、ユーザーに色の選択肢を与えることで、自由度の広がる設計を実現させました。<br>開発では、月別やフィルタリングなど、日にちによって表示する数値を変化させる必要があったため、その点が開発の肝でした。そのため、日にちを管理するためのプラグインへの理解を深めることで、開発をスムーズに進められるようにしました。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>企画からリリースまでスピード感を持って取り組めたことは良かったですが、分類の文言が曖昧だと感じています。「今日・今後・完了・未完」の部分のことです。<br>このような納得できない部分がリリース後にあるというのは、設計の詰めが甘いことの表れなので、今後はより一層詳細に取り組んでいきたいです。フィードバックをもらいながら改善していこうと思います。</p>

TASKS｜スマホアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/50529b0173404a7aabb5305b2e795a88/Frame-5545-1-1-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="ha4d90b3fa1">RealTime Chatとは？</h3><p>「RealTime Chat」は、誰でもすぐに参加できるチャットアプリです。<br>難しいことは何ひとつありません。参加者は、ルーム番号を入力するだけで、同じルーム番号の人とすぐにチャットを楽しむことができます。<br>会話を弾ませることを目的に、可愛らしいポップなデザインを採用しました。<br><strong>基本情報</strong><br>名前RealTime Chatリリース日2022年9月17日作成期間5日間役割Webデザイン / 開発URL<a href="https://realtime-chat-client-mauve.vercel.app/" target="_blank" rel="noopener noreferrer">https://realtime-chat-client-mauve.vercel.app/</a><br><strong>技術スタック</strong><br>デザインFigmaフロントエンドHTML / CSS / JavaScript / ReactバックエンドNode.jsライブラリSocket.io</p><h3 id="h334f52e823">RealTime Chatの特徴</h3><p><br><strong>超簡単！名前とルーム番号を入力するだけ！</strong><br><strong>会話が弾むポップなデザイン</strong><br></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>参加者はメッシさんとロナウドさんです。それぞれのタブで操作をしています。</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、リアルタイムチャットアプリを作ってみたいという私の願望から生まれました。LINEのような複雑な関係性を持つアプリではなく、2人だけの関係性を持てるチャットアプリを使ってみたかったのです。<br>どうやって作ろうかと考えていたときに、Web クライアントとサーバー間のリアルタイムの双方向通信を可能にするライブラリ「<a href="https://socket.io/" target="_blank" rel="noopener noreferrer">Socket.io</a>」を見つけました。<br>公式ドキュメントを見ると、初心者でもかなり使いやすいことが分かったため、このライブラリを使ってチャットアプリを作ることにしました。<br>フロントエンドにはReact、バックエンドにはNode.jsを採用しました。Reactは、高速レンダリングを可能にするという特徴を持ち、Node.jsは大量アクセスに強く、リアルタイムでの処理を可能にするという特徴を持っています。<br>これらを掛け合わせれば、サクサク動くチャットアプリが作れると確信しました。</p><h3 id="ha88dc2a453">ゴール</h3><p>サクサク動くチャットアプリで、2人だけのチャットを楽しむこと。</p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>アプリの立案からデプロイまで、スムーズに進められた点は良かったです。技術選定では、ReactとNode.jsを採用することで、それぞれの特性を活かしたチャットアプリを作ることができたと思います。<br>今回のプロジェクトを通して、Webアプリはモバイルアプリに比べると、リリースが簡単であることを再認識しました。Webの場合は、<a href="https://jp.heroku.com/" target="_blank" rel="noopener noreferrer">Heroku</a>や<a href="https://vercel.com/" target="_blank" rel="noopener noreferrer">Vercel</a>などのサービスを使えばサクッと出来てしまいますが、モバイルの場合は、iOSならAppleの審査、AndroidならGoogleの審査があり、それぞれ細かい規約を守る必要があります。<br>そういった点を踏まえると、新規開発においては、はじめにWeb版を出し、次にモバイル版を出すという手順がいいのかなと思いました。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>今回は開発メインということで、デザインを背景画像に頼っている部分があります。そのため、次に何かを作るときは、デザインも含めて設計してみようと思いました。</p>

RealChat｜Webアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/e16892a7daac4197bdee570fb3523b2b/Frame-5539-3-2-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="he1896f78e6">CRUDアプリを作ろうとは？</h3><p>「CRUDアプリを作ろう」は、エンジニアのための情報共有コミュニティ<a href="https://zenn.dev/about" target="_blank" rel="noopener noreferrer">Zenn</a>で出版した書籍です。<br>CRUDとは、作成（Create）、読み込み（Read）、更新（Update）、削除（Delete）という４つの機能のことです。<br>本書籍では、この４つの機能を有したアプリの作り方をご紹介しています。<br><strong>基本情報</strong><br>名前Flutter x FirestoreでCRUDアプリを作ろう｜MVVM + Repositoryで実装するアプリの作り方価格500円リリース日2022年6月5日作成期間3日間役割開発 / マーケティング URL<a href="https://zenn.dev/terupro/books/76740fb5b23b98" target="_blank" rel="noopener noreferrer">https://zenn.dev/terupro/books/76740fb5b23b98</a><br><strong>技術スタック</strong><br>表紙デザインFigma言語Dart（Flutter）データ管理Firebase（Cloud Firestore）</p><h3 id="h9af6bbf889">実際に作るアプリ</h3><p><br>CRUDの機能を有したシンプルなTodoアプリです</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、Flutter x FirebaseでMVVMパターンを一通り学び終えたあとに生まれました。Flutterは2018年の12月にリリースされたこともあり、日本語の情報がかなり遅れています。そのため私は、海外の情報を収集するようにしていました。<br>例として、状態管理が挙げられます。日本では<a href="https://pub.dev/packages/provider" target="_blank" rel="noopener noreferrer">Provider</a>を使って解説する記事が多いですが、アメリカでは<a href="https://pub.dev/packages/riverpod" target="_blank" rel="noopener noreferrer">Riverpod</a>を使って解説する記事が多いです。<br>それは、RiverpodはProviderの上位互換だからです。技術の出発点であるアメリカでは、最新技術であるRiverpodが当然のように使われています。<br>日本でも現場では、Riverpodを使用していますが、あまり共有がなされていません。そのため、初学者が一昔前のProviderを学ぶことに陥ってしまっていたのです。<br>この問題を解決するために、Zennにて書籍を出版することを決めました。<br>私がFlutterで使用するDart言語について解説した記事は、Google検索で1位を獲得し、月間2万PVを超えています。それだけ日本語の情報が求められているということです。<br><strong>▼記事のリンクはこちら</strong><br></p><h3 id="ha88dc2a453">ゴール</h3><p>Flutter初学者が、正しい手順で正しい学習をする手助けをすること。</p><h2 id="hb685e3bedc">実績</h2><h3 id="h08adfcf89b">データ</h3><p>売上数43冊いいね数31個「flutter crud」Google検索ランキング2位<br>※2023年1月29日現在</p><h3 id="had77d11e74">みんなの声</h3><p>Twitterでのリツイートやブログでの引用など、ちょっとした反響があります。</p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>どんな人でもアプリが作れるようになる解説をすることに最も苦労しました。最終的に私は、初学者が技術を学ぶ上で最も大切なことは「達成感」にあると考えました。<br>初学者はできない経験をすると、挫折してしまいがちです。そのため、アプリを完成できないという事態は絶対に避けなければなりません。<br>そこで、完成済みのコードに直接解説を加える方法を採用しました。コピー＆ペーストで、いつでもアプリを完成できる状態で解説を進めていったのです。<br>結果的にこの方法が上手くいったと確信しています。<br>マーケティングに関しては、ブログ記事の一番最後に書籍を紹介することで動線を作りました。実際に８割近くの方がそこから購入に至っています。Flutter関連のブログ記事を読み、分かりやすいと思った人が購入する流れを上手く作れたと思います。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>今回の書籍は、1つの小規模なアプリを作るという初歩的な内容なので、今後は分野問わず、より深く学べるようなコンテンツを生み出していきたいと思っています。<br>そのために、個人ブログで継続して記事を執筆することで解説力や自分の専門領域への知見を深めていきたいです。</p>

CRUDアプリを作ろう｜書籍

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/3ac9a0f621ad4d838c80aca7453e352e/Frame-5542-1-1-1024x577.png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="he2ce507321">ポイメモとは？</h3><p>ポイメモは、日頃のちょっとしたメモに最適なアプリです。<br>ポイポイ使えるメモアプリということで「ポイメモ」と名付けました。一度使ってみれば、ポイポイの意味が分かるはず。最速でメモを取れるような設計に仕上げています。<br>メインカラーは白で、デザインは<a href="https://webdesign-trends.net/entry/11155#i-3" target="_blank" rel="noopener noreferrer">ニューモーフィズム</a>のような立体感を意識しました。「シンプルながらも、遊び心を」という想いが込められています。<br><strong>基本情報</strong><br>名前ポイメモ｜シンプルで使いやすいメモアプリリリース日2022年5月6日作成期間3週間役割UI/UXデザイン / 開発 / マーケティングURLAppStore（<a href="https://onl.bz/HJ2Lny9" target="_blank" rel="noopener noreferrer">https://onl.bz/HJ2Lny9</a>）<br><strong>技術スタック</strong><br>デザインFigma言語Dart（Flutter）アーキテクチャMVVM（Model View ViewModel）データ管理Drift</p><h3 id="hc57c3e5df8">ポイメモの特徴</h3><p><br><strong>シンプルで心弾むポップなデザイン</strong><br><strong>キーボードが閉じない！ポイポイ追加できる</strong><br> （追加ボタン以外の画面を押すと閉じます）<br><br><br><strong>癖になる押し心地のぷよぷよボタン</strong><br> （ボタンを押すと振動が加わります）<br><strong>テキストの長押しでコピーできる！</strong><br><br><br><strong>目に優しいダークモード対応！</strong></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>【操作の説明】<br> ①テキストフィールドをタップ<br> ②メモの入力⇆メモの追加<br> ③テキストの長押しでメモのコピー<br> ④お天気ボタンでダークモードに切り替え<br> ⑤メモの削除</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、大学２年生の夏に参加したアイデアソンで生まれました。アイデアソンとは、特定のテーマを決め、グループ単位でアイデアを出し合い、その結果を競うイベントのことです。<br>そこでは、特定のテーマが決まったら、アイデアを付箋に書き出し、次に書き出したアイデアから最終的な答えを導いていきました。この「アイデアを付箋に書き出す」作業をアプリとして形にできないかと考えたのです。<br>私は日常生活の中で、自分の考えを上手く整理できないことがありました。それは頭の中がごちゃごちゃした状態で考えをまとめようとしていたからです。<br>そういった場面で、とりあえず「メモのためのメモ」という形で、思いついたことを残せるアプリがあればいいと思いました。ポイメモで簡単なメモを取り、次に自分の考えをまとめるサイクルができれば、情報を整理しやすくなると考えたのです。<br>そこで私は、このような問題を解決するメモアプリを作ろうと決めました。</p><h3 id="ha88dc2a453">ゴール</h3><p>いつでもササっと自分の考えを整理できるようになること。</p><h2 id="h0b0d08b338">企画</h2><h3 id="ha18f335127">ペルソナ設定</h3><p>イベントを通して出会った若手起業家の人達にインタビューの協力をしてもらい、そこで浮かび上がってきた共通のお悩みとニーズに基づいてペルソナを作成しました。<br></p><h3 id="h2524076a8b">価値仮説</h3><p>今回のアプリの本質的な価値は、ユーザーが自分の考えを整理できるようになるための手助けをすることにあります。あくまで、メモは作業でしかありません。<br>そのため、この作業をノーストレスで行えることを軸にサービス設計しました。<br></p><h3 id="h3aa3c5f4a1">競合分析</h3><p>メモアプリを制作する上で、競合となるアプリを調査しました。<br>その結果、シンプルで使いやすいメモアプリはあるが、デザイン性が乏しいアプリが多いこと。純正のメモアプリと役割が被っているものが多いこと。この２点が調査から分かりました。<br>ここから、タイトルだけに特化したメモアプリ、なおかつデザイン性に優れているアプリを作れば、競合優位性を生み出せると私は考えました。<br></p><h3 id="h6ea01fc821">提供価値</h3><p>ペルソナや競合分析の内容を下に、今回のアプリのコア機能を2つ作成することを決めました。コア機能は「メモの編集」と「コピー機能」です。<br></p><h2 id="hf2d7d3b8fc">情報設計</h2><h3 id="h1c9fe6ed01">オブジェクト抽出</h3><p>企画で整理した内容を下に、ユーザーのサービス体験フローを物語形式で整理しました。その中で、登場するオブジェクト（名詞）を洗い出していきました。<br></p><h3 id="h006c79229a">ワイヤーフレーム</h3><p>抽出したオブジェクトを下に、ワイヤフレームを作成していきます。修正することを前提になるべく早く形にし、ブラッシュアップしていきました。<br>主なポイントは、メモを最速で入力できる設計を考えることでした。入力エリアを上に置くアイデアは、PinterestやDribbbleに掲載されているデザインから着想を得ました。<br>また、１画面のみの設計にし、上の方のメモしか見れないようにすることで、メモの削除を促進させ、考えを整理できている感覚を味わえるようしました。<br></p><h2 id="h8c061cf219">表現</h2><p>ワイヤフレームがある程度できたら、今度は見栄えを整理していきます。主なポイントは、設計がシンプルなため、毎日メモしたくなるような遊び心を加えることでした。<br>出来るだけメモを目立たせるために、配色や影の関係性を意識しました。ボタンに関しては、押したら振動を加えることを想定していたため、ぷよぷよ感を演出しました。<br></p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>メモアプリはシンプルですが、ユーザーの心情をさらに深掘ることで、さらにシンプルにし、ポイメモにしかない体験が作り出せたのではないかと思います。<br>メモを最速で入力できる設計を考えることが最も苦労した点です。入力エリアを上に置いたり、追加ボタンを押してもキーボードを閉じないようにすることで形にしました。<br>開発では、基本的なCRUD操作のみだったのでスムーズに行えましたが、ビジュアルの面で、配色や影の関係性を意識しながら自然な凹凸を表現することに苦労しました。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>ユーザーの心情を深掘ることで、今回のアプリを生み出すことができたと思います。とはいえ、アプリはまだまだ未完成で、メモがないことを示すラベルやフォームのプレースホルダーなど、足りていない情報が多くあるのでこれから改善していきたいです。<br>この経験を得て、ユーザー視点で制作することの大切さを改めて感じました。今後はより一層、ユーザー視点で考えられるように、日々の生活から相手の立場に立って物事を考える習慣を身につけていきたいと思います。<br>余談ですが、私はこのアプリを日常的に使っています。使い方としては、見聞きした情報やふと思いついたアイデアをポイメモに残し、後でノートにまとめる感じです。<br>興味がある方はぜひ、日常のメモに「ポイメモ」を活用してみてください。<br><br> 実際のノート<br></p>

ポイメモ｜スマホアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/17fd4bebd1f24ca7ac83e858982cb819/Frame-5540-2-1024x577.jpg" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="he0db0f62fc">Postsとは？</h3><p>Postsは、共有機能を持たないプライベートに使える投稿アプリです。<br>普段は投稿しないような写真やコメントを、周りの反応を気にせず自由に投稿することができます。好きな写真を好きなときに好きなだけ投稿して楽しめます。<br>投稿系アプリなので、意味が伝わるように「Posts」と名付けました。メインカラーは黒です。プライベートな空間を作り出したいという想いが込められています。<br><strong>基本情報</strong><br>名前Posts｜自分用写真投稿アプリリリース日2021年12月29日作成期間1ヶ月役割UI/UXデザイン / 開発 / マーケティングURLAppStore（<a href="https://apple.co/3GuwsXj" target="_blank" rel="noopener noreferrer">https://apple.co/3GuwsXj</a>）<br><strong>技術スタック</strong><br>デザインFigma言語Swift（SwiftUI）アーキテクチャMVVM（Model View ViewModel）データ管理Core Data</p><h3 id="hbc4b585084">Postsの特徴</h3><p><br><strong>背景の水玉が動くポップなデザイン</strong><br><strong>なんとなく投稿した画像がオシャレになる！</strong><br><br><br><strong>片手で簡単！スマートに投稿できる</strong><br><strong>投稿の長押しで編集・削除ができる！</strong><br><br><br><strong>プライベート感溢れるロック機能付き！</strong></p><h3 id="h1531444498">実際の使用イメージ</h3><p><br>【操作の説明】<br> ①パスコードロック解除（自分で設定可能）<br> ②プラスボタンをタップする<br> ③投稿内容を入力（テキストのみも可能）<br> ④詳細ページに移動<br> ⑤投稿の長押しでタスクの削除を選択</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、私の幼馴染の弟であるY君（高校生）の悩みから生まれました。同級生がInstagramなどのSNSを利用している中、Y君はあまり利用していませんでした。<br>話によると、Y君は周りの反応が気になってしまい、投稿したくても投稿ができないということでした。これに関しては、個人の自由であり、私がとやかくいうことでは無いので話はすぐに終わりました。私もインスタ映えなどには興味がないタイプです。<br>しかし、この話をふと振り返ったときにアイデアを思いつきました。Instagramのような写真投稿アプリなんだけど、共有機能がないアプリがあれば、Y君のような人のニーズに応えられるのでは無いかと。このような経緯でPostsは生まれました。</p><h3 id="ha88dc2a453">ゴール</h3><p>周りの反応を気にせず、好きな写真を好きなだけ投稿することで、自分を表現することの楽しさを知ってもらうこと。</p><h2 id="h0b0d08b338">企画</h2><h3 id="ha18f335127">ペルソナ設定</h3><p>高校のサッカー部の後輩にインタビューの協力をしてもらい、そこで浮かび上がってきた共通のお悩みとニーズに基づいてペルソナを作成しました。<br></p><h3 id="h2524076a8b">価値仮説</h3><p>今回のアプリの本質的な価値としては、お気に入りの写真を投稿することで、自分を表現することの楽しさを知ってもらうことにあります。あくまで、写真の投稿は作業でしかありません。<br>そのため、この作業をノーストレスで行えることを軸にサービス設計しました。<br></p><h3 id="h3aa3c5f4a1">競合分析</h3><p>写真投稿アプリを制作する上で、競合となるアプリを調査しました。<br>その結果、共有機能を持たない写真投稿アプリがほとんどないこと。共有機能があっても、多機能なものが多いこと。この２点が調査から分かりました。<br>ここから、共有機能を持たないデザイン性に優れている写真投稿アプリを作れば、競合優位性を生み出せると私は考えました。<br></p><h3 id="h6ea01fc821">提供価値</h3><p>ペルソナや競合分析の内容を下に、今回のアプリのコア機能を2つ作成することを決めました。コア機能は「投稿の編集」と「ロック機能」です。<br></p><h2 id="hf2d7d3b8fc">情報設計</h2><h3 id="h1c9fe6ed01">オブジェクト抽出</h3><p>企画で整理した内容を下に、ユーザーのサービス体験フローを物語形式で整理しました。その中で、登場するオブジェクト（名詞）を洗い出していきました。<br></p><h3 id="h006c79229a">ワイヤーフレーム</h3><p>抽出したオブジェクトを下に、ワイヤフレームを作成していきます。修正することを前提になるべく早く形にし、ブラッシュアップしていきました。<br>主なポイントは、背景にアニメーションを加えることを踏まえ、骨組みをガイドラインに沿ってシンプルに設計することでした。<br></p><h2 id="h8c061cf219">表現</h2><p>ワイヤフレームがある程度できたら、今度は見栄えを整理していきます。主なポイントは、シンプルながらも、プライベート感をビジュアルで表現することでした。<br>ボーダーは１つの情報になってしまうため、極力使わず、色で階層を表現しました。プライベート感を生み出す表現として、背景アニメーションを加えました。<br></p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>プライベート空間を設計、そしてビジュアルで形にすることに最も苦労しました。ビジュアルに関しては、ベースを黒でまとめ、背景にアニメーションを加えることで、他のアプリにはない独特な雰囲気を出せたと思います。<br>背景が目立つので、骨組みをシンプルにすることでユーザーに与える情報量のバランスを取りました。また、ロック機能をつけることでプライベート感を演出しました。<br>開発では、CRUD操作を実践で使えたのが良かったです。CRUD操作は、アプリ開発の基礎となる部分なので、流れを理解できるまで繰り返し学んでいました。<br>今回が初めてのアプリリリースで、アプリ審査やストア接続などの様々な障壁がありましたが、開発からリリースまでの一連の流れを掴めたので良い経験になりました。</p><h3 id="h95ba7bf61c">今後に活かすこと</h3><p>今回のアプリは、開発スキルを考慮して最小限の機能に留めましたが、今後は技術レベルも上げていき、より多機能で実用的なアプリを作れるようにしていきたいです。<br>今回はプライベート感を出すためにダークテーマを採用しましたが、ライトテーマでそのような表現を出すアイデアが浮かびませんでした。そのため今後は、より一層多様なプロダクトに触れていくことで、デザインの引き出しを増やしていきたいと思います。</p>

Posts｜スマホアプリ

<p><img src="https://images.microcms-assets.io/assets/2bc64f0f950544c69b47bc447e9ee35b/28fa1a4381b24b688f08595a24a6a1e7/Frame-5543-1024x577%20(1).png" alt=""></p><h2 id="h9707d3a59a">概要</h2><h3 id="h3376f67914">SwiftUIチュートリアルとは？</h3><p>SwiftUIチュートリアルは、SwiftUIの基礎を20分で学べるYoutube動画です。<br>SwiftUIとは、Appleが開発した、アプリケーションのグラフィカルユーザーインターフェイスを構築するためのフレームワークのことです。<br>トピックごとの解説で、初心者でもスムーズに学習を進められます。<br><strong>基本情報</strong><br>名前SwiftUIチュートリアルリリース日2021年12月22日作成期間3日間役割開発 / マーケティング URL<a href="https://onl.bz/1qPAE6p" target="_blank" rel="noopener noreferrer">https://www.youtube.com/watch?v=IkkxTjPJFoA</a><br><strong>技術スタック</strong><br>言語Swift（SwiftUI）エディタXcodeサムネ制作Canva動画編集CapCut / Canva</p><h3 id="h70864f3f5d">SwiftUIチュートリアルの特徴</h3><p><br><strong>集中力を上げるBGMを採用！学習が捗る！</strong><br><strong>トピックごとの解説で分かりやすい！</strong><br><br><br><strong>ハンズオン形式で実践的に学べる！</strong></p><h3 id="h231a3a2de9">実際のイメージ</h3><p>https://youtu.be/IkkxTjPJFoA</p><h3 id="hc69c85bcf9">背景</h3><p>このアイデアは、私がSwiftUIを学び始めたときに生まれました。今でこそSwiftUIの解説動画が散見されますが、当時はそのような動画がありませんでした。<br>それを受け、SwiftUI初学者のために自分が今まで学んできたことを共有しようと考えたのです。基礎を体系的に学べる動画があれば、初学者が最初の段階で躓かずにスムーズに開発を進めていけると思いました。</p><h3 id="ha88dc2a453">ゴール</h3><p>SwiftUI初学者が、SwiftUIの楽しさや可能性を感じながら基礎を習得すること。</p><h2 id="hb685e3bedc">実績</h2><h3 id="h08adfcf89b">データ</h3><p>視聴回数1,442回総再生時間64.3時間「SwiftUI」Youtube検索上位表示「SwiftUI チュートリアル」Google検索ランキング5位<br>※2023年1月29日現在</p><h3 id="had77d11e74">みんなの声</h3><blockquote>最高！！全く無駄がない！！<br>無駄のない良いチュートリアルですね！ SwiftUIの良い復習になりました<br> 忘れたらまた見に来ます〜。<br>とても良いです！シリーズ化お願いします！<br>助かります〜<br>いいチャンネル見つけたと思ったら、動画が1本だった。 残念。<br>   </blockquote><p>引用元：Youtubeコメント欄より</p><h2 id="h85a62dd0d7">総括</h2><h3 id="hafbac558c9">頑張ったこと</h3><p>今回のプロジェクトを通して、動画制作の大変さを思い知りました。視聴者のことを考えると、何度もタイプミスやコードの書き直しは学習のストレスになってしまいます。<br>そのため、動画撮影中はミスをしないようにと気をつけて撮影していました。数えきれないほどの取り直しをしましたが、結果的に納得のいく動画ができたと思っています。<br>私は過去に、長期インターン先でCM撮影のお手伝いをしたことがあるのですが、そのときに経験した映像制作の苦労を思い出しました。<br>しかし、良い作品を届けるための過程は楽しく、それを顧客に楽しんでもらえることは幸せなことだと改めて思いました。</p><h3 id="h1c43723b67">今後に生かすこと</h3><p>私は少々完璧主義なところがあるので、今回のプロジェクトでも、完璧を求めて予想以上に時間を使ってしまいました。<br>今後は効率的に作業を進めるために、まずは7割、そして10割に仕上げていくようなイメージで取り組んでいきたいと思います。</p>