ブログはじめました

業務で Next.js を使う機会があったのでキャッチアップを兼ねて本ブログを作りました。デザインはモバイルファーストでレスポンシブにしました。

Web サイトのデザインも自分で行うため、Web Design Standard という本でデザインの基本的なことを学びました。

Fetching Previewhttps://www.amazon.co.jp/gp/product/4844367773

具体的には次のことを学びました。

• PC とスマートフォンのレイアウト
• サイトの種類ごとのレイアウト
• 色の基本
• 色とレイアウトが与えるイメージ
• レイアウトと配色のトレンド
• UX デザインと UI デザイン

一番興味深かったのはファッションと同様にデザインにもトレンドが素材することです。ここ数年のトレンドだと次のようなものが挙げられます。

• 横スクロール
• ダークモード
• ニューモーフィズム

横スクロールはユーザビリティが低いデザインとして長らく使われてきませんでしたが、Apple の iPad の商品ページで横スクロールが採用されたことにより横スクロールを使うサイトが増えてトレンドになりました。

ダークモードは 2019 年の OS アップデートにより Apple の 端末でタークモードが使えるようになったことがきっかけでダークモード対応したサービスが増えてトレンドになりました。

ニューモーフィズムはボタンや入力フィールドなどのコンポーネントを凹凸で表現するデザイン手法です。2019 年ごろに dribbbleというデザイナー向けの SNS での投稿をきっかけにで注目を集め、2020 年ごろからデザイン手法として取り入れるサイトが増加しました。

ブログの favicon には MICIN MONSTER を使いました。MICIN MONSTER とは私が現在所属する株式会社 MICIN で行っている社内の取り組みの一つで社員の個性と特徴を表現したキャラクターアイコンのことです。私のアイコンはシルクハットとトランプを持ったマジシャンのようなアイコンになっています。一時期マジックにハマった時期があり、プロマジシャンが行うマジックもできるようになりました。忘年会でみんなの前で行うこともあります。

Fetching Previewhttps://www.wantedly.com/companies/micin/post_articles/286697

Safari で Web サイトをホーム画面に追加すると このように表示されます。

Next.js を使っみて CRA(Create React App)で開発をする際にぶつかる課題を解決するように設計されてる印象を受けました。解決されている課題としては次のようなものがあります。

• サービス紹介ページ、ドキュメント、FAQ のようなクライアントサイドレンダリングする必要のないページでもクライアントサイドレンダリングになる。結果的にページが表示されるまでに時間がかかり、SEO 観点で不利になる。
• コード分割を明示的に行わない限り全ての JavaScript コードが 1 つのファイルにバンドルされる。そのためアプリケーションの成長に伴い表示速度が低下する。
• webpack の設定をカスタマイズしたい場合は CRA(react-scripts)に内包されている設定を eject する必要があり、eject は不可逆な操作である。ただしサードパーティの npm パッケージを使ってオーバライドすることは可能です。
• 画像の最適化はフレームワーク外で行う必要がある。例えば、画像のダウンロードサイズを小さくするために端末とブラウザに応じてサイズと圧縮形式を最適化するためには画像サーバを別途用意する必要がある。画像サーバのオープンソースではthumborがあります。

Next.js と CRA(Create React App)の比較は別の記事に投稿します。更新頻度は高くはないですがブログの更新はしていく予定です。