<h1 id="hc315754485">開幕</h1><p>早くも2月になってしまいました、、、、！<br>一月は何か特別なことをやったかというとなんもしてないかったと振り返って虚しくなる今日この頃です。<br>（大学の期末課題出すのを忘れて確実に単位落としていることに気づきました🎒）<br>しかも、お正月太りをしてしまいもうわけわかんないです笑<br></p><h2 id="h071ecc4617">Acvation開発したい</h2><p>自分は元々、大学在学中に一つのプロダクトを作り上げることを目処にこのプロダクトを一人で実装しています！<br>が、最近すごくサボっていて自分が以前どのようなコードを書いたのか忘れているような状況でした。<br><br>ちなみに最後にDevブランチにプッシュしたの16日前という放置をしていました。息混んでいたのに情けない、、、、<br>というわけでこの機会に元々デザイン部分がひどかったということもあり、もう一度作り直したいと思ったのがきっかけです。<br></p><h1 id="h49153b7347">ここから本題！デザインのお話👨</h1><p><br>まずみてもらいたいです。<br>元々のデザインを<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/9614929ebdb749f99eb8047ea70917d4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%203.38.55%EF%BC%882%EF%BC%89.png" alt=""><br>これが元々のページです。<br>これだけなら自分自身は、<strong>正直あまり悪くもない、かもなく不可もない状態</strong>だと思います。（デザインセンスないからこれが精一杯です。。。これでも相当頑張っていたと思います。）<br></p><h3 id="h6b59ec7197">しかし！！！！！！！！！！！！</h3><p>レスポンシブで見てみましょう<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/49270d5c50cc49b9b75578df28e4d554/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%203.43.34%EF%BC%882%EF%BC%89.png" alt=""><br>What???<br>これはまぁなんでしょう〜〜<br>なんと画像部分が邪魔をしていて<strong>ログインボタンさえも押せない</strong>のです！！！<br>これは大問題なのはわかっています。<br>原因の方もわかっています。<br></p><h2 id="h8f3266c02e">Next.jsのImageタグ問題</h2><p>自分自身本当にNext.jsにお世話になっており、Imageコンポーネントも同様です。<br>簡単に自分が思いつくだけでも</p><ul><li>ブラウザによってはwebpに変換して出力してくれる</li><li><span style="color:#111111">遅延読み込みは自動的に行ってくれる</span></li><li><code>objectFit="cover"</code><span style="color:#111111">とかいう使いやすいのがしっかり標準装備</span></li><li>画像のクオリティまで指定できるとかいうおもてなしっぷり</li></ul><p>改めて本当に便利なものだと実感しています！！<br>しかし<br><strong>全部画像周り自動でやってくれないかな〜</strong>とかいう魔法を信じている自分にとってはとても難しい設定となっており、<br>故に詰まることがとてもたくさんあると思っています。<br>さらに、自分の認識が正しければ<br>pxしかできない　or　<code>layout="fill"</code>しか設定できないというダブルパンチ👊<br>こりゃ自分には厳しいな〜と改めて実感してました。。。<br><br>ざっとこんなことがあったのでしっかりと作り直そうかなと思いました！<br>（自分の基準ではログインボタンが押せればいいぐらいを想定していました笑）<br></p><h2 id="he1c7a63b51">いざ実装</h2><p>自分のこのプロダクトは<strong>tailwindCSS &amp; Sass</strong>で全て書いています。<br>正直自分自身今でも上手くは使いこなせていないのですが</p><ul><li>サンプルコードがかなりある</li><li>痒いところに手が伸ばしやすい</li><li>補完の部分で実際にどのような定義がされているのか確認できるのでImageコンポーネントのwidthとheight設定の時に役立つことが多い</li></ul><p>などあってこれからもしばらくはこれを使っていこうと思います。<br>しかし、動きを出そうとすると結構難しかったりするんですよねこれが、、<br></p><h2 id="hf04a4ef95b">便利なライブラリ見つけた！？</h2><p>公式ドキュメント：　https://headlessui.dev/<br>こちらのサイトです！<br>どうもtailwindと関係深いらしくとても簡単に記述するだけではなく独自のクラス名などがなく利用できるのでとてもおおすすめです！<br>特に一部の部分は参考にするだけでCSSなどの知識などもつけることができるので学べることがとても多いものになっています。<br>自分も実際にf<strong>lex部分の知見が全くない</strong>のでこれを通して一部の部分はflex縛りで実装しました😀<br></p><h2 id="h417ee6002e">結局のところ</h2><p>1月最後の夜の時間を使い実装していました。　← こんなんやってないで課題やっておけばと後悔しています笑<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/e39df46d602f4867b611f62e07a7dc0e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%204.07.31.png" alt=""><br>こんな感じで綺麗め系のデザインになりました。<br>正直自分はこれを作るのでも相当苦労しました。<br><strong>marginとpaddingしかわからない</strong>自分にとっていい経験になったと思います。<br>またレスポンシブについても<br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/af7247281d7f422796e67c7f65e60650/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-01%204.10.42.png" alt=""><br>こんな感じで作ることができるようになって、やっとログインボタンが改善されました笑<br></p><h2 id="h28b62bc2c0">今後の課題</h2><p>一つとてもでかい問題があって<br><strong>レンダリングの速度がすこぶる悪くスコアがとても低い</strong>ことです。<br>このプロジェクト自体はNext.jsで実装しているのですが<br>パソコンの方は95点以上は安定して取れるようになっていますが<br>モバイルの方が<strong>64点</strong>と意味わかんないくらい問題がたくさんあるので修正するようです。</p><blockquote>もし実装のヒントなどがあればぜひ教えてほしいです🙇‍♂️</blockquote><p>また、フロント側の知識自体もまだまだ上手くできていない部分しかなくて<br> メモ化やキャッシュなども考えればパフォーマンス的にも良くなると思います。。。！<br><br>引き続き修正します。<br>もし技術的な部分も記事などのリクエストなどがあれば書こうと思うので何卒よろしくお願い申し上げます。</p>

自分自身Acvation.comという
肌悩みに悩む人を結びつけることができるようなプラットフォームを開発しています。
その中でもちろん一人で開発することになっているので
フロントとバックエンド側は実務経験の問題もあり割と順調に開発することができるのですが
今まで逃げてきたデザイン部分が苦手な人の1月最後のお話です😭

デザイン苦手すぎてプロダクトで詰まる件

Too bad I'm so bad at design that I'm stuck with product.

<h1 id="h696e98ee0a">自己紹介</h1><h2 id="h066b9984f8">初めまして！</h2><p>記念すべき、一つ目の記事となります！<br>Acvationという肌悩みに悩む人を結びつけるプラットフォームを開発しているSoutaと言います。<br>まず、この記事をご覧いただきありがとうございます。</p><h3 id="h9049d51fec">趣味</h3><p>よく友達とサッカーをやったり筋トレをしたりしています。🥩<br>結構、体育会のかもしれません（笑）<br>自分のマインドは<strong>努力すればなんでもできる</strong>みたいな考えがとても多いです。</p><h3 id="hf7dc255118">どんな人物か？</h3><p>最近友達に「努力家なカメレオン」と言われました🦎<br>どんな環境でも結果を残すことができる。そしていつでも安定したパフォーマンスを目指しています。<br></p><h1 id="hc69c85bcf9">背景</h1><h2 id="h1c4e7968fd">マインド</h2><p>自分の考えとして<br>「<u>人から学び、人に伝える。それが１番のインプット</u>」だと思っています。<br>理由として、自分で学んだ知見を人に説明するためにより深く知る。そのことで自分の頭の中の考えていること整理することができるようになり<br>すんなり自分の学んだことが吸収される❗️<br>そんなこと最近考えるようになりました。<br>そうすると自然に自分の学びや経験の知見を広めたい。そしてさらに自分の成長につなげていきたい<br>そんな機会になると思ったからです。<br></p><h1 id="h4b5bf6ab43">技術的な話</h1><p>多分この記事を読んでくれている方はこちらからが気になる部分だと思っています。🤗<br>※自分の間違っている認識があるかもしれません。そこの部分はご了承ください。</p><h2 id="h48162eced8">使用技術</h2><ul><li>TypeScript,  FW: Next.js<ul><li>TypeScriptは即決だったのですが、フレームワークに関しては<strong>Gatsby.js</strong>と<strong>Nuxt.js</strong>とでかなり迷いました。</li><li>Gatsby.jsとの比較<ul><li>GraphQL使える　← API開発するときに使っていてかなり使いやすかった。</li><li>エコシステム周りがブログサイト向き　← CMS向きが多いなど</li><li>ネットで出てくるテーマは大体Gatsby　← これはどうしようもありません。参考にさせていただく立場なので</li></ul></li><li>Nuxt.jsとの比較<ul><li>Vue使える　← よく使ったことないので使ってみたい気持ちはあった。</li><li>エコシステム周りが推奨品が結構あったりする　← reactでも問題なし◎</li><li>Typescript周り　← 実際によく触れたことないからわからない</li></ul></li></ul></li></ul><p><br>みたいな感じで考えていました。<br>それで結局SEOできて使い慣れているNext.jsにしました！</p><pre><code>// create static paths
export const getStaticPaths: GetStaticPaths = async () =&gt; {
  const data = await client.get({ endpoint: "blog" });
  const blogs = data.contents as Blogs;


  const paths = blogs.map((blog) =&gt; `/blog/${blog.id}`);
  return { paths, fallback: false };
};

// create props data
export const getStaticProps: GetStaticProps = async (context) =&gt; {
  const id = context.params.id;
  const blog = (await client.get({ endpoint: "blog", contentId: id })) as Blog;


  return {
    props: {
      blog: blog,
    },
  };
};</code></pre><p><br></p><h2 id="h9987192a45">環境周り</h2><p>まず、最初にどのようなシステム構成にするか悩んだんですが、</p><ul><li>DBで管理する　←　記法的に静的サイトであり、ゆえにあまりリクエストサーバーに送ることないからバックエンド側は不要かな</li><li>Dockerで管理　←  これは自分以外も開発者がいればやろうと思いましたが、いないので今後もし時間があればやる程度の感じ</li><li>NoSQL  ← できればデータベースをも不必要としたい。ブログなので単純なデータ管理ができればいい</li><li>デプロイ時のクラウド周り(AWS, GCP, Azure)　← 今まで使ってきて便利だとはわかりつつNext.jsだしレンダリング周りの設定もしてくれるvercelでいいのでは？</li></ul><p>みたいな感じで結局<strong>Vercel</strong>になりました（笑）</p><h3 id="he0c25730ad">CMS周り（microCMS）</h3><p>シンプルに管理しやすく最小構成で開発をしたかった。<br>その部分を考えると使ったことのないCMSをやってみて学んでいくといいかもしれない　← 実際にこれで構築してみましたが扱いやすかったので後悔はないです⚽️<br></p><h2 id="h132150a59a">苦労した部分</h2><p>圧倒的に<strong>デザイン周りの部分</strong>です！！！<br>というのも自分自身、あまりデザインの経験がなくいつも逃げてばかりでありました。。。<br>実はこのスタイルもtailwindCSSを使っているのですが、テンプレートを参考に作っているので正直一部おかしい部分があるかもしれません。（そこの部分があれば報告ください🙇‍♂️）<br>しかし、、、自分もこれをきにデザインの部分もしっかりと学んでいこうと思いました。<br><br>こちらの記事は随時更新していきます......!<br>
</p>

Souta Tech Blog.

ブログ記事一覧

デザイン苦手すぎてプロダクトで詰まる件

Next.js + microCMSでJamstackなテックブログを作り始めた話