「都市経営プロフェッショナルスクール」のサイトへ

都市経営プロフェッショナルスクールのWebサイト

副業で依頼を受けフロントエンドを担当（デザインは別の方が担当）

コーポレートサイトコーディング

都市経営プロフェッショナルスクール Webサイト制作

<h2>なぜ作ったか</h2>

<p>自分が登録しているブックマーク集が散らかってきたのがずっと気になっており、整理されたものがほしいなと思っていたのでReact/Next.jsの習作にと思い作成しました。</p>

<h3>開発上の技術スタック</h3>

<p>下記のようなかんじで、自分の使い慣れたものを中心に選んでいます。</p>

<p><a href="https://gyazo.com/f963b3eb20e9cdaeaf907ff99cde8328.png"><img src="https://gyazo.com/f963b3eb20e9cdaeaf907ff99cde8328.png" alt=""/></a></p>

<h3>作る上で力を入れたところ</h3>

<p>普段は個人開発のアプリは勢いで作る事が多いのですが、今回は、普段の業務っぽくユーザーの行動を考えた上で画面を作成しました。</p>

<p>
<a href="https://images.microcms-assets.io/assets/20188cd7f98040618a460f25b4643f18/f07dea93466945f2b0c30228e5ab8e6a/shittoco-user.png"><img src="https://images.microcms-assets.io/assets/20188cd7f98040618a460f25b4643f18/f07dea93466945f2b0c30228e5ab8e6a/shittoco-user.png" alt=""/></a>
</p>

<p>理由としては、開発したサイトが最近作り放しが多く、改善施策のモチベーション低下があると自覚をしており、ユーザーを想定してきちんと向き合うことで改善モチベーションを維持できないかというところからです。</p>

<p>機能の追加などでできる改善も多数ありますが、導線や文言など軽微な修正が良い改善になることも多く、そういった改善はユーザーと向き合っていないと良い仮設を持つのが難しいと個々最近感じています。</p>

<p>そのためシンプルなサイトではあるもののファンになってくれたユーザーの行動の仮設も考えて開発をしています。</p>

<p>またユーザーと向き合うのも大事な一方で自分がどうしたいのかも合わせて考えました。<br/>
これは自分がしたいことと、ユーザーがしたいことが悪い干渉を起こしていないかを気が付きやすくするためです。</p>

<p>
<a href="https://images.microcms-assets.io/assets/20188cd7f98040618a460f25b4643f18/769f30f4d78e425d9d8e22acae26556d/shittoco-motivation.png">
<img src="https://images.microcms-assets.io/assets/20188cd7f98040618a460f25b4643f18/769f30f4d78e425d9d8e22acae26556d/shittoco-motivation.png" width="600" alt=""/>
</a>
</p>

<p>プロダクト開発をする上で「改善」と一言で言ってもユーザーのための改善ではなく、サービス提供者（開発者）のために改善しているケースもあり、誰のための「改善」をしているのか意識するのに役立っています。</p>

<h2>KPIを設けてよかったところ</h2>

<p>GoogleAnalyticsのイベント計測でユーザーの行動を数字に落とせるようにできました。</p>

<p><img src="https://gyazo.com/458a7cde981a5e81379e9164f41865e2.png" alt=""/></p>

<p>GoogleAnalyticsが新しいバージョン（GA4）に変わり計測方針がページからユーザーに変わったので、1ユーザーあたりの平均イベントなども計測しやすくなっており、サイトのヘルススコアの管理ができるようになりました。</p>

<p>以前からこういった施策をやってみたかったのですが、なかなか重い腰が挙げられなかったので、今後の改善が楽しみになっています。</p>

<h2>UXのこだわりどころ</h2>

<p>今回Vercelを使いサーバー側をISRにしており、APIの更新があった場合は最新の情報がユーザーに提供されるようになっています。</p>

<p>このサイトでは、ユーザーがLIKEのリアクションをとってお気に入りサイトにポイントを付与できるようになっていますので、静的サイト（SSG）では更新タイミングが遅れるところを回避しています。</p>

<p><img src="https://gyazo.com/15da2efa7eabae5b245cc0838258174a.png" alt=""/></p>

<h2>最後に</h2>

<p>運用も改善もしやすい土台を整えたと自負しているので、当初決めた事を実現できるように励んでいくつもりです。</p>


Design Shittoco

自分でブックマークしてデザイン系のサイトを整理する目的で作成しました。
外部公開するに当たって、自分以外の人も利用しやすいようにLIKEのボタンを作っています。

デザイナ向けキュレーションサイト

<h2>サイトを作った経緯</h2>
      <p>2017/06/20頃に「旦那デスノート」というサイトがバズりました。</p>
      <p>このサイトは「旦那デスノートとは旦那へ死んで欲しいという願いを書くものである」と言ったサイトのようで、かなり感情のこもった投稿がかなりの頻度で投稿され、SNSを中心に騒がれました。</p>
      <p>
        私もWebデザイナの端くれなので、そのサイトをみて自分ならどんなサイトを作るか考えたら、「見ている人が幸せになれるサイト」っていうのがしっくりきたので、自分の奥さんの可愛い自慢をする「俺の嫁が可愛い」というサイトを作る事を決め、一人で作りました。</p>
      <p>旦那デスノートのソースコードを覗くとWordPressで作られてしましたので、そのあたりも同じようにしようと思いWordPressで作成しました。</p>
      <p>WordPressの開発は慣れているので、すぐに構成などをイメージすることができました。</p>
      <h2>公開してみて起こったこと</h2>
      <p>一言でいうと、めちゃくちゃバズりました。</p>
      <p>きっかけは自分でサイトを作ったという下記のツイートがきっかけです。</p>

<Tweet tweetId="877924072868282368"></Tweet>
     <p>おかげさまでこのツイート1.4万リツイート、1.1万いいねをもらえたのが起爆剤となり</p>
      <ul>
        <li>公開初日に10万PV</li>
        <li>公開7日で120万PV</li>
        <li>公開一ヶ月で300万PV</li>
      </ul>
      <p>という偉業も達成できました。</p>
      <p>他にも様々なメディアに取り上げられ、このサイト一つで日本の各種メディアに取り上げされました。</p>
      <p>下記すべての媒体で私自身も紹介されたので、当時の勢いは凄まじかったです</p>
      <ul>
        <li>テレビ</li>
        <li>新聞</li>
        <li>雑誌</li>
        <li>ラジオ</li>
        <li>大手ネットメディア</li>
      </ul>
      <h3>なぜここまでバズったか</h3>
      <p>一番大きな理由はタイミングだと推察しています。</p>
      <p>この「俺の嫁が可愛い」は思い立ってから3時間で開発して公開する超高速スピードでの開発です。</p>
      <p>なぜそこまで短時間で作る事にこだわったかが、話題になっているときにこのサイトを出さないと効果が半減することがわかっていたからです。</p>
      <p>「作り込む」より「いかにはやく公開するか」</p>
      <p>そこを一番大事にして開発をしてものの見事に成功をしました。<br />（公開する前はここまでバズるとは思ってもいませんでしたが…）</p>
      <p>他にもバズにまでつながった理由はあるのですが、個人的にはこれまで自分が意識してきて勉強してきた、「マーケティング」や「ユーザーの考え方」が実を結んだ結果かなと考えています。</p>
      <p>デザイナというと「キレイ」に見せることを仕事と思われがちですが、私は「人の心を動かす」のが仕事だと考えています。</p>
      <p>この「俺の嫁が可愛い」を公開した事で、それができるデザイナであると照明できたと考えています。</p>
      <h2>サイトが成功したポイント</h2>
      <p>タイミング以外でも成功した理由はあります。</p>
      <p>それは、ユーザーに参加しやすいUIにしていたからです。</p>
      <p>今は作りを変えているのですが、当初はユーザーがすぐに投稿できるように、投稿フォームをファーストビューに置いていました。</p>
      <p>他にも文言も堅苦しくないように「〇〇ですね！」のようにフレンドリー（対等）な文言にして、ユーザーとの距離を近づくようにしていました。</p>
      <p>小さな事ですが、ユーザーを行動させるための施策をいくつか散りばめていくことがこの結果につながったと思っています。</p>
      <p>
        また追加する機能に関しても、ユーザーからほしいとあったものを取り入れる姿勢をSNSでアピールしたりと開発者の私自身もユーザーとの距離を近づけた事でサイト/私両方のファンになってもらった事も継続的なユーザー獲得につながりました（バズってるときは、フォロワーさんがグ～ンと伸びました）</p>
      <h2>最後に</h2>
      <p>これと同じものを作っても、同じ結果には絶対になりません。</p>
      <p>これは、私が一番はやく作った結果です。<br />なぜこの成功ができたかは、ユーザーの事を理解する努力・一人でサイト制作を出来る努力を日々していて、それがピッタリと合致した事です。</p>


俺の嫁が可愛いのサイトへ

当時SNSでバズっていた「旦那デスノート」というサイトを見て、その真逆のコンセプトで「俺の嫁が可愛い」というサイトを3時間で制作。

公開初日で10万PV、その他yahooニュースなど大手メディアにも紹介されました。

バズったサイト

俺の嫁が可愛い

<h2>このアプリの概要</h2>

<p>パパダッシュ!! は家事・育児に偏りがある人がヘルプを出すためのWebアプリです。</p>

<p>Twitterでリリース報告後、600RT,1000いいねほどの反応をもらいました。</p>

<Tweet tweetId="1223833681829093376"></Tweet>
<p>ionicで作成しており、Web,iOS,Androidのマルチプラットフォームでリリースが可能です。<br/>
  現在週末などに改善タスクを消化して、より良いものに成長させています。</p>

<h2>作ることになったきっかけ</h2>

<p>Twitterで家庭の不和というかそういったすれ違い・誤解で盛り上がってるのを見て、問題がわかってるのであれば解決できそうと思って問題と課題解決を深堀りしてる中でアプリの内容を思いつきました。</p>

<Tweet tweetId="1223213752582979584"></Tweet>
<p>知人に子育て中の奥さんがいたので、インタビューと簡単なプロダクトタイプを作って好感触だったので作る価値があると思ってプロジェクトを始動させました。</p>

<h3>ヒアリングの結果</h3>

<p>このアプリのユーザーは家事・育児をする側と普段しない側に分かれます。</p>

<p>なぜこのような事が起きるのかを調査した結果、</p>

<p>家事・育児をする側の主張としては下記のようなものがありました。</p>
<ul>
  <li>言ってもやってくれない</li>
  <li>言う時間がもったいない</li>
  <li>サボってるように見られたくない</li>
</ul>

<p>普段育児・家事をしない側の主張は下記です</p>

<ul>
  <li>今困ってるとか知らなかった</li>
  <li>言ってくれたやる意思はある</li>
  <li>しかし具体的なやり方は知らないので教えて欲しい</li>
</ul>

<p>これらを整理するとコミュニケーションの不足というか心理的安全性の不足と仮説をたてました。</p>

<p>解決の方法としては第三者の介入「アプリのテンプレートにそって伝える」という手段を思いつきました。<br/>
  これであれば、目的だけのコミュニケーションで済むのでほかの感情の影響を考慮せずに連絡がしやすくなると考えました。</p>

<h3>このアプリで解決したかった事</h3>

<p>このアプリを使って、普段育児・家事をしない側がするようになるかというとそれは違います。<br/>
  そういった目的のアプリではありません。</p>

<p>このアプリで解決できるのは相手を信頼し直すというきっかけを作ることを目的としています。<br/>
  <small>※この信頼というのはあくまで「家事・育児」に大してで、その人自身全体の信頼ではありません。</small></p>

<p>一度この人に言っても駄目だと思ってしまうと再構築が難しくなるので、「こういうアプリがあるんだけど使ってみていい？」→「いいよ」からスタートする関係構築を目的としています。</p>

<p>リリース後こういった事を解説せずにいたのですが実際にこのように確認を取って使ってるユーザーを何人も確認できました。</p>

<h2>技術選定について</h2>

<p>開発のStackとしては、「Angular」「Ionic」「Firebase」「Netlify」になります。</p>

<p>これらを選んだ理由は以下になります。</p>

<ul>
  <li>
    Angular
    <ul>
      <li>
        過去にionicとの利用経験が合ったため
        <br />
      </li>
    </ul>
  </li>
  <li>
    Ionic
    <ul>
      <li>
        Webリリース後、ある程度改善をしたらそのままスマホアプリとしてリリースをしてユーザーを増加させるため
      </li>
    </ul>
  </li>
  <li>
    Firebase
    <ul>
      <li>
        家事の依頼のリストを更新する際、入力できる人が2名以上いるため、Conflictを起こさないようにするためにリアルタイムに更新できるFirestoreを採用しました。
      </li>
      <li>
        元々バズってリリースさせたい目的があったため匿名ログインが可能なFirebaseAuthを採用しました
      </li>
    </ul>
  </li>
  <li>
    Netlify
    <ul>
      <li>JAMStacの経験で何度も利用が合ったため</li>
      <li>LP側でお問い合わせフォームを作る必要が合ったため</li>
    </ul>
  </li>
</ul>


<h3>画面フロー</h3>
<p>画面フローは以下のように考えて作っています。</p>

<img src="https://blog.cntlog.net/wordpress/wp-content/uploads/15809965583319.jpg" alt="" />

AngularとfirebaseAuthを使えたおかげで、ログインしていないとにアクセスできるところとそうでないところの切り分けがやりやすかったです。

<h2>このアプリのUXのこだわりどころ</h2>

<p>ただのタスクの共有アプリで設計してしまっては、タスクを押し付けるだけのアプリになってしまいます。<br/>
  それであれば他のアプリでも可能なので問題解決になりません。</p>

<p>依頼された側が納得しやすいように「今の気分」の入力を必須にしています。<br/>
  <img src="https://i.gyazo.com/054b1d7138ff33d229f323e433ae81a5.png" alt=""/></p>
<p>これがあることで、どのくらいの温度感で依頼されてるかが伝わるようにしています。<br/>
  また依頼したいタスクも優先度をつけていますので、どれをやって欲しいというのがアプリだけを通して伝えることが可能になっています。</p>

<p>特に育児中の方はお子さんを抱きかかえたりしながらの状況が多いので片手で操作が簡単にでき、何も考えずに依頼できることを重視しています。</p>

<p>このあたりの設計はユーザーにフィットしたようでTwiteer内でも多くの方の反響をいただけました。</p>

<h2>作った感想</h2>

<p>このアプリは自分のUXデザイナ、UIデザイナ、フロントエンドエンジニア、マーケッターとしてのスキルが合ったからこそ作ることができたアプリだと自負しています。</p>

<p>まだクオリティとしてはプロトタイプレベルですが、まだまだ成長させることが可能なのでこれからもチャレンジをしていきます。</p>

「パパダッシュ!!」のサイトへ

SNSで家事・育児の認識の齟齬が話題になっていたため、解決手段としてWebアプリを思いつきオリジナルで作成

ユーザー自身も認知していない解決手段を提示できたようで、多くの方から称賛の声をいただきました。

家庭内タスク共有アプリ

パパダッシュ!!

<h2>このサイトの概要</h2>

<p>このサイトは日本の補助制度をカテゴリ毎に分割し、自分が置かれてる状況をベースに制度を探しやすくしたサイトです。</p>

<p>サイト構築はNuxt.js/Prismic/NetlifyのJAMStackで運用しています。</p>

<h2>なぜJAMSTackなのか</h2>

<p>人によってはこういったサイトであればWordPressでいいじゃんと言われがちですが、私は安易にWordPressを選択することを反対しています。</p>

<p>なぜなら何らかの理由で、WordPressから離れそうとすると再利用が難しく作り直しになってしまうからです。</p>

<p>JAMSTackではよく言われるものは下記に当たります。</p>

<ul>
  <li>より良いパフォーマンス</li>
  <li>より高いセキュリティ</li>
  <li>より安価で簡単なスケーリング</li>
  <li>より良質な開発者エクスペリエンス</li>
</ul>

<p><v-btn color="primary" target="_blank" text href="https://jamstack-ja.netlify.com/">JAMStackについて</v-btn></p>

<p>自分がJAMStackを選択する理由はこの中でも「良質な開発者エクスペリエンス」です。</p>

<p>今回のものでいえばAPIとフロントエンドを別にしているためリニューアルの話になったときでもフロントエンドを変更またはAPI側を変更する事と分離して考えられるからです。</p>

<p>JAMStackに限らないのですが、こういった影響範囲・依存範囲を限定して制作することで技術の依存度を下げてずっと保守していけるサイトが出来上がります。</p>

<p>JAMStackで作る場合これまでのようにHTML/CSS/JavaScriptの知識が求められ、制作スキルとしてはよりハードなものを求められますが、一度作れるレベルにまで達すると開発のしやすさを知り辞めることのできなくなります。</p>

<p>今後もこういった技術Stackでの開発はどんどん求められるようになると思いますが、まだまだデキる人の数が少ないためその分野でも活躍できるような技術を得るために今回作りました。</p>

<h2>Prismicを選んだ理由</h2>

<p><a href="https://prismic.io/" target="_blank">Prismic</a>は日本ではマイナーですが海外ではそこそこ使われているHeadlessです。</p>

<p>GraphQLで配信されるため、扱いもしやすく気に入っています。</p>

<p>もともとHeadlessCMSを選定したとき下記の候補がありました。</p>

<ul>
  <li><a href="https://microcms.io/">microCMS</a></li>
  <li><a href="https://www.contentful.com/">contentful</a></li>
  <li><a href="https://airtable.com/">Airtable</a></li>
</ul>

<p>どれも日本ではメジャーでしたが、価格やほしかった機能要件を吟味した結果Prismicに決定しました。</p>

<p>特に重視したところは、今後HeadlessCMSとしてコーポレートサイトなどを作るときに使いやすいものはどれかと比較したかった背景もあり、Prismicを選んでいます。<br/>
  特に気にってる部分は料金で基本無料で使えるので、思いつきで作るサイトで使いやすい・コーポレートサイトのような更新頻度が低い場合でも相性が良いという点で気に入っています。</p>

<p>ドキュメントはすべて英語ですが、欲しい機能はドキュメントにまとまっているため比較的読みやすいのも作っていくなかで評価が高かったです。</p>

<h2>作った感想</h2>

<p>普通にHTML/CSS/JavaScriptで作るよりハマりどころは多かったですが、対処法は理解できたのでJAMStackの基本的なノウハウは習得できたと考えています。</p>

<p>助成制度をまとめるのが大変でしたが、長く誰にでも探しやすいサイトにできたと思っています。</p>

「ジャポトク」のサイトへ

Nuxt.js,Prismic,NetlifyのJAMStacで作ったサイトです。

100ページを超えるサイト管理をHeadlessCMSのPrismicで管理ができています。

JAMStac構成のサイト構築

ジャポトク

<h2>このアプリの概要</h2>

<p>
  ホウビンゴはタスク管理をするなかで自分にご褒美を与えるといったアプリです。
  <br />
  ionicで開発しているため、Web/iOS/Androidのマルチプラットフォームでリリースが可能です。
</p>

<p>
  元々のアイデアはねとらぼさんの「
  <a
    href="https://nlab.itmedia.co.jp/nl/articles/1712/29/news038.html"
    target="_blank"
  >
    忙しい時期も楽しくタスクをこなす方法！　お母さんの作る「家事・お片付けビンゴ」に「真似したい」「発想が素晴らしい」の声
  </a>
  」の記事を見たからです。
</p>

<p>当時ionicの勉強も偶然していたため、試しに作ってみました。</p>

<p>なお、作った当時はionic3でしたが現在はionic4にリプレイス済みです。</p>

<h2>作ってみた感想</h2>

<p>
  この頃からJavaScriptフレームワークを触ることが増えてWebのフロントエンドに関わるようになってきました。
  <br />
  ionicを覚えることでAngularとTypeScriptに目覚めましたが、そのきっかけはこのアプリを作ったことにあります。
</p>

<p>
  Angularやvue.jsなどを触りはじめたのでjQueryを使わなくなったのもこの頃になります。
</p>

「ホウビンゴ」のサイトへ

自分が決めたご褒美で至福の時間を楽しむ自分で自分を甘やかすアプリ。

タスクをビンゴ形式に当てはめてタスクを楽しんで処理できるアイデアをionicで実現。

ご褒美付きタスク管理アプリ

ホウビンゴ

<h2>このサイトの概要</h2>

<p>WordPressで作った自分用の技術ブログです。<br/>
  長く続けているブログですので、色々な方に見ていただけており勉強会などで読者の方に挨拶されることも多く、このブログがなければ自分の認知度が今のようにはなっていなかったと思います。</p>

<h2>作ってみた感想</h2>

<p>元々はWordPressの勉強用に作ったものだったのですが、マーケティングの勉強やサイトの運用もここで学ぶベースになりました。</p>

<p>「<a href="/portfolio/oreyome/">俺の嫁が可愛い</a>」もそうなのですがこれらの経験が合ったのでアフィリエイトなどでも成果を出すことができたと思います。</p>

<p>また定期的にアウトプットする癖もブログを書くことで身についたのでアイデアを思いついたらすぐ作れるようになったのもこのブログが合ったからだと自負しています。</p>

<p>Webデザイナはアウトプットをし続けれるかたが非常に少ないのですが、自分の場合はこのサイトがあるからこそインプットとアウトプットを両方できています。</p>


「CNTLOG BLOG」のサイトへ

9年続けてきたブログ。
2016年からは月4記事を書く事を目標に継続

継続することでSEOやライティングの能力を鍛えました。

都市経営プロフェッショナルスクール Webサイト制作

見どころ

このサイトの概要

作ってみた感想

その他の制作物