また一つ、楽しいサイトを作りました。 手作り作家さんや地域の事業者・ボランティア団体などを応援し、活躍できる場所を提供することで、お客様との交流と出会いの場として、 地元活性の一助となるように地域に根ざした活動をしているスマイルブリス（Smile Bliss）さんの活動を支援するイベントサイトです。ウェブサイトを作るのみならず、ギャラリーの写真の撮影、プロモーション動画も手掛けました。バックエンドはmicroCMSです。

Smile Marche様Webサイト

<h2 id="hd5138bd0e3">初めての企業さま案件 (Over 40 Web Club案件)</h2> プログラミングコミュニティ Over 40 Web Club からのご縁で、スタートアップ企業さまのWebサイトを制作させていただきました。Next.js / Tailwind css /&nbsp;<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">MicroCMS</a>&nbsp;という技術選定。初めてデザインを提示されて実装したサイトでもあります。クライアントの希望を伺いつつ、効果的な配色などのデザインでもご提案させてitだきました。 PWAも実現し、Lighthouseスコアの、パフォーマンス99点、アクセシビリティ、ベストプラクティス、SEOでフルスコアを実現。 Google Analytics、Google Search Consoleなどの仕組みも取り入れ、大変勉強になりました。 公開：January 2022

玄川リサーチ（Gen-Scent Research Laboratory) 

なぜか「設立当初から」のキーワードと縁のある今日この頃。若かりし頃は歌を歌うのが好きでしたが、その機会はすっかり失われておりました。10年越しに声をかけてくださっていた友人の誘いに応じ本当に久しぶりに、歌を歌っています。 長い歴史のある合唱団ですが、仕切り直しとなり、今年第一回演奏会を開催すべく、猛練習中です。 第一回ですからね、早速作りました。合唱団のWebサイトとプロモーション動画。使用技術はGatsbyとiMovie。Netlifyにホスティングしています。 このシニア世代の合唱団のメンバーも、私の目には、情熱にあふれる魅力的な人々としか映りません。私たちは、姿は経年の変化に晒されても、心には、いつまでも変わらぬ情熱を秘めているものです。そんな気持ちをアニメーションアバターにしてみました。もちろん、このサイトと動画で、大変盛り上がりました。 何となくデザイン好きでありそうと気がつかれ、印刷物を一気に引き受けています。 招待状やプログラムのデザインも任せていただき、初めてのIllustrator制作で入稿も果たしました。制作物内容のやりとりにNotionを導入したり、地域の50++ともITの恩恵を享受したいと思っています。 <h2 style="text-align:center" id="h4eadc4c855">【女声合唱団ポレポーレ】</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FGAhSsJVeUvc%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DGAhSsJVeUvc&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FGAhSsJVeUvc%2Fhqdefault.jpg&key=ef481becf9fd4c17aa243190ea33aa20&type=text%2Fhtml&schema=youtube" width="560" height="315" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 style="text-align:center" id="hbb5415ca52">さあ、御伽の国へ一っ飛び</h2>✨ファーストコンサート プログラム✨ <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/ef449835a11440269a3f9480bbf6173c/pic_polepole_program1.jpg" alt=""><img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/9b421c9aea0f41bcb273e0aa269d414b/pic_polepole_program2.jpg" alt=""> ✨ご招待状✨ <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/37193a2ec45c4c6ca86d8eb1c4feb730/pic_polepole.jpg" alt=""> <img src="https://images.microcms-assets.io/assets/94b75565dab34b138a7391982f2cda60/e3633df599e548b78b12db9cf21ba98f/pic_polepole_inside.jpg" alt=""> ILLUSTRATOR <h2 style="text-align:center" id="h43e9b21742"><a style="color:#a4c520" href="https://polepole.netlify.app/" target="_blank" rel="noopener noreferrer">女声合唱団ポレポーレ</a></h2> GATSBY.JSNETLIFY

女声合唱団ポレポーレ

<h2 id="hebc06ffa10">APIを取得してデータが表示✨</h2>Tailwindならレスポンシブも驚くほど簡単。メディアクエリでかなりレスポンシブ対応ができるようになりましたが、ライブラリーを使用すれば、開発時間をグッと短縮できます。<a href="https://microcms.io/" target="_blank" rel="noopener noreferrer">MicroCMS</a>って本当によくできているのです。すっかりファン。学んだことをフルに生かし、可愛らしいメインクーンの写真に癒されながら、とうとう公開まで漕ぎ着けました。 <a href="https://www.sakuraipiano.com" target="_blank" rel="noopener noreferrer">Cattery Canon</a>&nbsp;制作：October 2021

Canon Cat（メインクーンブリーダ）

<h1 id="h18af7c8bdc"><a href="https://sakuraipiano.com/" target="_blank" rel="noopener noreferrer">落ち込んでる場合じゃないねん！と言って生まれたサイト</a></h1> 音楽家受難の時代を生きる <a href="https://sakuraipiano.com/" target="_blank" rel="noopener noreferrer">櫻井ピアノスクール</a>&nbsp;·&nbsp;June 1st, 2020 時はコロナ。長年の友人がコロナになって次々と活動の場所が失われ、すっかり落ち込んでしまったのを見て、落ち込んでいる場合ではない！私がWebサイトを作ってあげる！！と言って最初に作ったのがこちらのピアノスクールのWebサイトでした。 作ってあげると言ったものの、Webサイトなんて実際に公開したことなどなかったのでドキドキでした。生まれた当初はBootstrapを使ったテンプレートからサイトを作りました。jQueryもコピペでスムーズスクロールなども実装してみました。デプロイはAWS S3。とにかくお金のかからない方法を模索した結果でした。 10年間新しい生徒さんがなかったそうですが、このサイトを通して次々と新しい生徒さんがいらっしゃるようになったそうです。 今ではNext.js製のパフォーマンス重視のサイトに置き換えたので、表示速度もサクサクになりました。サーバーもVercelに移動しました。Google様の評価もよろしいようで、検索上位に登ってきてくれます。 学んだことが活かせるのは嬉しいですね。

Sakurai Piano School

<h2 id="h634b0ba292">お題投稿アプリ</h2> IT KINGDOM イベントのために作ったお題投稿アプリ。 <ul><li>✓　Firebaseへの登録がわからなくて、締め切りの差し迫る中、現役エンジニアと初のコラボ。</li><li>✓　DB設計の大切さを痛感。</li><li>✓　エンジニア脳じゃないので、独創的なアプリ。</li></ul>

お題投稿アプリ

<h2 id="h22fe1858df">チャットアプリ</h2> LT会イベントでヤジを飛ばしたり、質問したり。<ul><li>✓ イベントごとに模様替え。</li><li>✓ みんなのコメントが愛しい。</li><li>✓ 少しづつ進化。</li></ul>

チャットアプリ

<h2 id="h496275de90">Ring the Bells</h2>IT KINGDOM LT会登壇のために作ったアプリ。アプリに行って、ひつじさんをタップしてみて。素敵な1日になること間違いなし！<ul><li>✓　かなり学習の集大成。</li><li>✓　Webで独特な境地に立つ。</li><li>✓　ベルを鳴らそう。</li></ul>

Ring the Bells

<h2 id="hf077cf861e">イベントを盛り上げるために作るアプリは楽しい</h2> 幹事をランダムに選出。<ul><li>✓　ピカピカアニメーションが炸裂。</li><li>✓　選出中は、作者としては変な挙動がないか、ドキドキ。</li><li>✓　みんな使ってくれてありがとう。人々のやさしさに泣く。</li></ul>

幹事をランダムに選出するアプリ

<a href="https://www.themoviedb.org/documentation/api" target="_blank" rel="noopener noreferrer">TMDB</a>からAPIを取得して映画を検索できるアプリ<ul><li>✓　Newmorphismを極めたいと思いつつ、ド派手なデザインに移行。</li><li>✓　OGPは完璧。</li><li>✓　CSSでの塗り絵は楽しい。</li></ul>

映画検索アプリ

自分でやると、ダサいデザインになってしまう。気分を上げるためにキラキラを配置。<ul><li>✓　1日、2リットルのお水を飲むと良い。</li><li>✓　250mlのお水を8杯飲んだらちょっと嬉しいアプリ。</li><li>✓　使うのすぐ飽きた。→いつまでも愛されるアプリすごい！</li></ul>

一日2リットルのお水を飲みましょう

Neumorphismというデザインを知り、実装したくなって作ってみたアプリ。キーコードの使い所がわかりません。<ul><li>✓　Neumorphismはクール。</li><li>✓　コード量半端ない。</li><li>✓　デザインに凝りすぎて、JSの勉強にはあまりならなかった。</li></ul>

Neumorphism のキーコード取得アプリ

このサウンドボードを組み合わせたアプリは司会を引き受けるたびに大量生産しました。レスポンシブとOGPに異様に拘っていたこの頃。 <ul><li>✓　オンラインでのイベントは、いかに迷子にならないかが勝負。</li><li>✓　司会原稿に効果音を仕込んでおけば、拍手やファンファーレもタイムリーに発動。</li><li>✓　こんな使い方する人、ほとんどいない（需要なくても気にしない。</li></ul>

サウンドボード

日本でも親父ギャグというのがありますが、英語にもdad jokesがあるんですね。世界は普遍性に満ちています。 <ul><li>✓　親父ギャグ、API叩ける。</li><li>✓　ホスティングサービスNetlifyを知る。</li><li>✓　&nbsp;GitHubと連携して、コマンド一つでサイトを更新。夢叶った。</li></ul>

笑ってはいけない英語学習

<ul><li>だいたいこの辺りから</li><li>✓　ママのプログラミングハマりっぷりは、ドン引き（息子</li><li>✓　パパのことオタクっていうけど、ママも相当だよね（娘</li><li>✓　心が暇なら死んだ方がマシ...</li></ul>

琥太郎ストップウォッチ

ドットインストールを学習しながら作った、カレンダーと時計。二つ組み合わせて琥太郎くんをあしらえば、世界に一つだけのマイウォッチ。格安でアプリを置けるのはAWS S3しかないと思っていた。 <ul><li>✓　AWSにS3デプロイ♪ Route53設定できる。</li><li>✓　修正のたびにコンソールに行くの、死ぬ。</li><li>✓　長いURL、使えない💦</li></ul>

琥太郎タイピングゲーム

<h2 id="h740af7f9f6">デザインを変えてみる楽しさに目覚める🎉</h2>Progate、ドットインストールそのままやってもつまらない。 <h2 id="h8e8415c175">給付金でMacを購入。🚀</h2> <h2 id="hb07ac591ce"> 琥太郎くんをみてたら、だいたい幸せ。🏃 JavaScript、難しい🏃</h2>

Portfolio