<h1 id="h3a3eee698e">複数のおかしい挙動や機能の連続</h1><h2 id="h4b2374c25c">フォードバックをいただいて気づくことができたこと</h2><p>少し自分の軸やどういうエンジニアを目指しているのかどうかをお話しさせてください。<br>自分が目指しているエンジニアは技術はもちろんなのですが、それよりもプロダクトに対して適切な技術を用いてアプローチして</p><ul><li>この機能を実装したらユーザーにとってどのような恩恵があるのか</li><li>今のニーズに応えるにはこんな機能が必要だからこの技術を用いて開発する<ul><li>実装のコストやパフォーマンスの部分も考えられたらよりいい</li></ul></li></ul><p>など今この記事を書いているときには他にももっとたくさんあるのですが<br>何が言いたいかというと<strong>ユーザー目線で考えられてプロダクトとして愛されるようなものづくりをするエンジニア</strong>を目指しています。（自分ではそう思っています）<br>そう考えたときに今回のプロダクトの技術選定として自分は当初<br><strong>最初にある程度の技術を用いてリリースした方がいい</strong>と考えていたのですが<br>知人にフィードバックをいただいたときに<br><strong>「実際に利用してもらってフィードバックをいただいた方がユーザーに求められていることを知ることができるのではないか」</strong><br>とアドバイスをいただきました。</p><h3 id="h19e02269a3">目指していた軸が少しぶれていた、、、</h3><p>自分が今回のプロダクトを通して本当にしていたいのは<br><strong>自己満のためのプロダクト</strong>　← とにかくどれだけ時間がかかってもいいから難しい技術を採用して見せつけようとする<br>みたいな方に少しズレていたような気がして振り返ったときに自分が本当に作りたいもに対して考えてみると<br><u>実際にユーザーにプラットフォームとして提供していただいてリアルに少しでも喜んで欲しい</u><br>という自分の経験をもとにそもそも作り始めているものでもあるので改めて原点回帰できてとても良かったのと<br><strong>定期的に周りの人にフィードバックしてもらって自分のアプリの軸と実際に作っているものが客観的にズレていないかどうか</strong>を確認することが必要だったと思います。<br>このことを初めの段階でフィードバックしてもらったからこそ気がつくことができた部分だと思います。</p><h2 id="h729c1e6bf9">デザインが本当に苦手</h2><p>これは少しずつ改善しようと思っているのですが<br>本当に自分がデザインする必要があるのか？　← ということがいつも頭の片隅にあり結局全然進捗しない<br>ということを最近特に思っていて<br>自分のプロダクトではtailwindCSSを用いてスタイリングをしているのですが<br>本当に基礎的な部分しかわからない部分があって<br>せっかく一つのライブラリでスタイリングを完結することができるのに<br>結局<strong>Sass</strong>を使って一部すたリングされています。<br>具体的に話させていただくとリッチエディタ部分は全てSassです。<br>理由としては二つあって</p><ol><li>自分自身が全然CSSのことをよく知らない<ol><li>元々Flexあたりから訳が分からなくなって逃げていました</li></ol></li><li>リアルタイムでWatchして適切なスタイリングに変換する必要がある<ol><li>Tailwindでもいいが分割できないということが裏目に出てしまってわかりづらいものになっている</li></ol></li></ol><p>といった理由があります。<br>そんなわけでTailwind ± Sassのような構成になっており、ベストプラクティスな構成なのかどうかが分からないのでアドバイスいただけたら幸いです🙇‍♂️<br>実際に一例としては</p><pre><code>.rich-editor
	    &amp;__header
	        background-color: rgb(204, 205, 207);
	        min-height: 5vh;
	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;
	        font-size: calc(10px + 2vmin);
	        color: white;
	        margin-bottom: 5vh;
	        text-align: center;
	        border-bottom: 2px solid rgb(86, 86, 87);
	        margin-top: 5.2rem;
	    &amp;__wrapper-class
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &amp;__editor-class
	        background-color: #f7f4f4;
	        padding: 1rem;
	        border: 1px solid #ccc;
	    &amp;__toolbar-class</code></pre><p><br>のようにコーディングしています。リッチエディタ全体のコーディングの部分です。<br>これから実際にはここにクラスを定義しなくてもファイル側に直接コーディングするのでも良かったような気はします。<br>それか<strong>JSX</strong>ファイルとして分割する方法もあったかもしれません。。。。<br>いずれにしろ頭の中で考えてみるとたくさんの意見ができて、本当に自分の実装がこれで良かったのかと振り返ると自信がないです。<br>もし自分がフロントエンドエンジニアを目指すとして画面の部分のUXの部分をしっかりとこなすことはもちろんですが、ある程度デザインの知見や考え方がないと自分のためにもプロダクトとしてもいいものができないと改めて実感しました。</p><h3 id="hc2955fb743">実はヘッダー部分はまだまだ問題だらけなんです</h3><p>ログイン後のここの部分は現在はゴリ押しになっていて<br>理由として<strong>モーダル時の表示が画像があると隠れてしまうようになっている。</strong><br>といった仕様に現在はなっています。。。。<br><br><img src="https://images.microcms-assets.io/assets/16519dbfe7054ef7b04d3143b8d55981/3753e750488641c9bac91ed6808e07c7/%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-14%201.57.32.png" alt=""><br>ふかぼるとまだまだ実装できていない場所などもありますが現在はこれにとどめておいて優先度高くこなしていこうと思います。</p><h2 id="ha214098e44">まとめ</h2><p>まだまだこのプロダクトはベータ版もできていないようなものにはなっていますが作りたいものの軸がぶれないことが大切だと思っています。<br><br>また本日SNSなども作ったのでよければフォローしてください！！<br></p><ol><li>インスタグラム　← <a href="https://www.instagram.com/acvation">こちらから！</a></li><li>ツイッター　← <a href="https://twitter.com/acvation" target="_blank" rel="noopener noreferrer">こちらから！</a></li><li>Slack ← <a href="https://join.slack.com/t/acvation-dev/shared_invite/zt-13iz0dhwj-tOw8PXHo1EAd~EYKqOlW2g" target="_blank" rel="noopener noreferrer">こちらから参加できます！</a><ol><li><strong>Slack</strong>に関しては入って直接アイデアやフィードバックをいただいても構いません。。。</li><li>お願いします✋</li></ol></li></ol><p><br>是非よろしくお願いします。</p>

先月までレスポンシブ対応をされていないからスマホだと操作することができない。
一部の部分がビルドしてデプロイしても途中で途切れるといったユーザーを待たせてしまう処理がある。
機能として使いずらい部分がとても多く、使っていたくはなくなる。
など、実際に周りの方に利用していただいてさまざまなフィードバックをいただきました。
今回はそれを含めて一度レスポンシブに対応できる前提でリプレイスしようと思って取り組んでいた
まとめになります📓

Acvationリプレイスしました。

Acvation replaced.

<h1 id="h9b047028ae">そもそも論</h1><p>最近コロナウイルスが絶賛流行っていて自粛生活の佐々木です🌳<br>最近少し忙しかったです。（言い訳でしかありません。）<br>自分自身、<a href="https://acvation.com/" target="_blank" rel="noopener noreferrer">acvation</a>というサイトを今年に入ってから本格的に開発をしています。<br>その中で自分がプロダクトとして最大限に提供したい価値として<br><strong>誰でも簡単に投稿することができて、UI的にも優れていくれるものに変換してくれるといったものが必要不可欠</strong>だと考えます。<br>その部分を考えたときに自分なりの要件として</p><ol><li>簡単にカスタマイズすることができる。</li><li>前回と比べて格段に投稿しやすいプロダクトにする</li><li>プレビューをさらに実用的にそしてフォーカス時などのパフォーマンスも落とさないようにする</li></ol><p>という部分を特に意識指定開発していこうと思っていたのが背景です。<br>また、実際にこの要件を満たすコードを書いていたところ詰まる部分などがとてもたくさんあり、<br>自分自身最初はそれほど難しいものではないと思っていたのですが、いざ開発してみると<br>ドキュメントのコードがうまく動かなかったりプレビューを導入するならではの難しさなどがあったので共有させていただきます。😀<br></p><h2 id="h88d3ef1cbe">実際に取り組んでみて</h2><p>実際に考えから開発にするまでは<strong>一週間</strong>ほどかかりました。（元々の予定は３日間ぐらいで完成できると思っていました。）<br>まず最初に「react リッチエディタ」のように調べてみたら<br>とても有名なdraft.jsというライブラリを見つけて<br>実績としても申し分なくドキュメントを読んでみても使いやすそうだったので使ってみました。<br>→ 世の中の誰かが作っていただいたライブラリなどを使用してみてよければプロダクトに落とし込むの本当に好きです笑<br></p><h3 id="hdc064bf0f8">実際に作ってみたんだけど？</h3><p>まずは簡単にドキュメント通りに進めてみましたが早速問題が起こりました<br><u>え、ツールバー自体は利用することができないの？？</u><br>というのもライブラリを入れてインポートすればデザイン周りも含め全てやってくれると思いましたが全然そんなことありませんでした笑<br>普段どれだけ頼っているのかがとても感じることができた瞬間でした。<br><br>そういうことなら自分で作ってみようと思ったところで実際にdraft.jsを中心としているものの<br>他のライブラリを多用してやってみた時にとてもしっくりくるものがあったのでそちらのスタイルシートを使って開発をしました。<br></p><h3 id="hee9c32d58b">やってみた感想</h3><p>実際に実装完了して現在は運用していますが　← 是非使ってみてください🔥<br>個人的にかなり難しい部分がとてもありました。<br>当初はただ単に入力された<strong>文字をhtmlに変換して表示させる</strong>というだけしか思っていなかったのですが<br>そのHTMLに変換するときに装飾された部分をどのようにプレビュー表示できるのかどうかという部分にかなり苦戦しました。<br></p><h3 id="h37f44fe987">どんなことあったの？</h3><p>例えばなんですけど</p><pre><code>//typeになっていないのが原因である。
// const editorRef = useRef&lt;Editor&gt;(null)
// ref設定をしないと意図しない挙動をする
// ref={editorRef}</code></pre><p>refの部分をしっかりと設定しなかった時に今までの文字が突然コマ切れのように表示されるようになったり。<br>こんな感じでどう分割して表示するかを考えていました。</p><pre><code>  const inlineStyle: DraftInlineStyle = editorState.getCurrentInlineStyle()
  console.log('class', inlineStyleHandler(inlineStyle))
  console.log('state', editorState)
  const splitHTML = (htmlTemplate: string) =&gt; {
    const split = htmlTemplate.split(/[]/)
    console.log(split)
  }</code></pre><p>さらにエディタの部分はしっかりとこだわりたかったので本当に利用する価値のある機能のみのミニマムな構成にしようと思いました。<br>そのためオプションの選択が難しくなってしまった。。。<br>また、実際にコンソールで見たときに自分なりのロジックなどや正規表現などを用いて分割することができたりしたのですが<br>どのようにそのロジックを文字変換に変更しようという部分はかなり難しく<br>コード的にも冗長な部分がとてもあるメソッドとなっており、メモ化できる部分もたくさんあるためまだまだ修正は必要そうです。。。</p><h1 id="h28b62bc2c0">今後の課題</h1><p>acvationの課題部分にも記述させていただきましたがまだまだ未完成な部分がとても多いと考えております。<br>その中で自分なりに特に注意したいものになっているのは</p><ol><li>デザイン部分が完全に自分の主観で作っているので本当にユーザーが使いたいと思うニーズを満たすことができているのか　←　やはりデザインのセンス😭</li><li>情報自体をステートで持っているのでもし途中で接続などが切れてしまったら再レンダリングされることになり入力していた情報が消えてしまう。</li><li>一つの処理の部分がそれぞれとてもウォッチしていて重いものになっているのでさらに高めることができるのではないのか</li></ol><p>などを特に考えております。<br>また、もっといいプロダクトよりのライブラリなども改めて調べてみるとありそうなので<br>とりえずこの機能は実装完了として<br>時間の余裕があれば是非再度付け加えたいと思っています。📝<br>また、プロダクト自体さらにユーザーに寄り添って使いやすいものになるように精進してきます。<br></p><pre><code>　これからは実際にどのようにコードを記述したかなども含めて共有することができればと考えているので楽しみにしてください！！　
また、少しずつわかりやすいように記述していけるように努めます。</code></pre>

自分のプロダクトに何が足らないか考えた時に今までのUI/UXを完全に無視したものをプロダクトとして作っていました。
draft.jsにカスタマイズを加えてリッチなエディタに仕上げています。
それもあって再現性がとても高いものではないエディタになってしまい、「誰でも簡単に記事を投稿することができるエディタ」を目指していたのに全く違うものになっていたのが現実です。
なので今回、自分なりに試行錯誤に結構の日数はかかってしまいましたが自作のエディタを作ってみました！！✏️
また、リアルタイムでパフォーマンスよく反映されるようにも調整して誰でも簡単に編集できるといったオリジナルです。
ぜひ、実際に触れてみて触ってほしいです！！こだわりいっぱいです。
今回はその備忘録です。

デザインもパフォーマンスもいいおしゃれなエディタを作りました。

We have created a stylish editor with good design and performance.

<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>

Sota Tech Blog.

Acvationリプレイスしました。

デザインもパフォーマンスもいいおしゃれなエディタを作りました。

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

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