この記事は ここのえ Advent Calendar 2023 Day 1の投稿です。
Introduction
初めまして。ここのえです。やせいのプログラマーです。
先日、ポートフォリオ製作の一環としてホームページを作りました。
前職は社内システムの実装～ポスター・チラシといった宣材のデザインまでやる ITよろず屋 だった事もあり、身に着けたスキルを活かしてやってみました。
制作時に幾つか気づきがあったのでアウトプットしてみようかな？と考えていたのですが、調べてみてもエンジニア目線＆個人製作でのワークフローに関する記事はパッと探した感じあまり見かけなかったので、この記事にまとめてみます。
この記事のターゲットとしては、これから個人でWeb開発やデザインを始めたい！という方や、バックエンドは触ったことあるけどフロントはよくわからん……が、自前で作ってみたいという方を対象としています。そういった方々の一助となれれば幸いです。
忙しい人向けの要約
- デザイン
- デザインを構成する要素を知っておくことで、効率よく参考とする要素を見つけられます
- デザインを作るときは、CSSの事を考えるのをやめよう
- 環境構築
- 何を作るにせよ、
Nodeの知識は最低限あったほうが良いです -
ReactかVueあたりを使うとモダンな開発ができます -
TypescriptやSassなどを活用し、開発スピードを上げよう
- 何を作るにせよ、
- 実装
- セクションごとに、レスポンシブがちゃんと動くか確認しながら実装を進める
- 最後は気合と諦めない気持ち
全体のワークフロー
製作にあたっての大まかな流れはこんな感じです。
フロントエンドが未経験だと「覚えることが多すぎて何から手を付けていいか分からんが？」となりがち。先に完成までの道のりを示します。
全体像が見えていた方が、完成までモチベーションを維持しやすいです。
-
モックアップを作成（モバイル・デスクトップ両方）
- デザイン作成に使うツールを決める
- どういった内容・構成のページにするか決める
- デザインの方向性を決めて、既存サイトを調査する
- デザインを作成する
-
技術スタックの検討・環境構築
- ホスティングサービスを決める
- フレームワーク・ライブラリの選定
- デザインを実装するために使うライブラリを選定する
- 開発環境を構築する
-
実装する
- やる気と気合
[1] モックアップの作成
手始めとして、まず全体のモックアップを作成します。
デザインを試作した時点でイマイチそうであれば、アニメーションで誤魔化しても大抵いい感じのサイトにはなりません。
実装をしてはイマイチで無限に消してリライトしたり、完成系が見えないまま着手してモチベが地球の裏側まで吹き飛んでいった、といったことにも繋がるので、そういった面でも満足が行くレベルのモックアップを先に作っておいたほうが幸せになれます。
[1-1] デザイン作成に使うツールを決める
デザインの第一歩として、まずモックアップを作るためのツールを決めます。
2023年現在、メジャーなツールとしては、
辺りですが、自分はメインデバイスがWindowsなので、Figmaを使用しました。
他にも Prottや InVision などがあります。最近は Pixso がちょっと気になる感じです。今のところ Figma がかなり強いので、迷ったらFigmaを使っておけば間違いないと思います。
逆にデザイナーとして普段活動しているのであれば、Illustratorを使うのもおすすめです。アートボードのサイズ変更だけ少し面倒ではありますが、普段のデザイン作業の延長線として使いこなしたツールを使えるというのは大きなメリットです。
※参考: Figmaの操作画面
残念ながらAdobe Xdは新機能更新を終了し、メンテナンスモードになりました。
AdobeのFigma買収の影響だと考えられます。将来のことを考えると、新規のプロジェクトで使うには避けた方がよさそうです。
個人的には一番お気に入りのツールだったので、非常に残念です……
[1-2] どういった内容・構成のページにするか決める
ツールが決まったら、各ページの内容や構成について考えていきます。
例としてポートフォリオサイトなら、
- 自己紹介
- スキル（言語や使用経験のあるツールなど）
- 個人のプロダクト一覧
- リンク
といったように、実際にページに乗せるものを決めます。複数ページの構成であれば、何個ぐらいページを作るか、どの情報をどのページに振り分けるかについて検討します。
デザインツールに雑にメモを書いておくと、後でデザインする時にすぐ見返せるのでオススメです。
ページ構成についてはデザインを作りながら並行して考えてもいいのですが、構成がある程度決まっていた方がデザインが作りやすいので、先に大まかに決めておいた方が無難です。
[1-3] デザインの方向性を決めて、既存サイトを調査する
構成が決まったら、次にデザインのコンセプトを決めていきます。
Web開発においては、「デザインを構成する要素」として、以下4点については意識しておきます。
- 配色
- フォント
- オブジェクトの形状
- 配置と余白
分かりやすいように独自解釈して定義していますが、本格的に知りたい人はWikipediaの Visual design elements and principles とかを読むと良いと思います。
これを念頭に置いたうえで、どんなデザインにするか方向性（雰囲気）を考えていきます。
イメージが湧きやすいように、コンセプトの例と一緒にサンプルのデザインを挙げておきます。
-
例1: かっこいい系のサイト
- 配色：黒寄りの色
#333333と白寄りの色#fafafaをベースとするモノクロ系 - フォント：Interなどのゴシック体フォント
- オブジェクトの形状：多角形を使った角ばったデザイン
- 配置と余白：余白を多めにして、見辛くならない程度に左右に配置する
- 配色：黒寄りの色
-
例2: 日本風, ゴージャス
- 配色:ゴールド
#AF9E7D・濃い赤#B94047・薄く黄色の混じった白#F5F3EF - フォント: Zen Maru Gothicのような丸ゴシック
- オブジェクトの形状:四角を基本とし、アクセントとして角を丸める
- 配置と余白: 大きめの画像を使い、左右どちらかに寄せて画像を配置して印象的に見せる
- 配色:ゴールド
これらのイメージが即座に出てくればいいのですが、私含め凡人にとっては無からこういった要素はどうやっても捻り出せません。
そこで大事になってくるのが、参考にするWebサイトを調査するという作業です。
以下のようなデザインを纏めてくれているサイトがあるので、こういったサイトで自分の欲しい雰囲気や要素を入れて検索し、参考になりそうなデザインを探します。
参考になりそうなサイトを見る際、先述したコンセプトを構成する要素(配色・配置等) を意識することで、デザインの雰囲気というものがどうやって構成されているか分かりやすくなります。
自分なりに解釈出来たら、自分のデザインとして取り入れてみましょう。
デザインの方向性を誤ると全体のクオリティに大きく波及するので、特に配色やフォントについては熟慮しましょう。「方向性を決める」という過程は軽視されがちですが、非常に重要な工程です。
Tips:参考としたデザインから要素を変えてもいいの？
もちろんデザインに択一的な正解は存在しないですし、オリジナリティという意味でどんどん要素を変えていいと思います。
例えば前述の「例1:かっこいい系のサイト」の場合、アクセントに濃いめのブルー#015B84を一色入れるとだいぶ印象が変わって、スタイリッシュでクールな印象が出てきます。
ただしパステル系の #81C5C7 #F1DBA9 を基調とした配色に変えると、今度はかっこいいというより優しい印象になってしまいます。その辺りについては吟味しながら、自分の目標とするイメージから離れないように気を付けましょう（もちろん、逆にそっちの方が面白かったら採用するのもアリです）。
逆に自分のアカウントやプロダクトにテーマカラーがある場合は、そこから逆算してデザインの雰囲気を決めていく、というテクニックもあります。
[1-4] デザインを作成する
ここまで来たら、いよいよモックアップに着手します。
コンセプトや内容が定まっていれば、デザイン中に迷走したり、謎の方向に突き進んで大きな事故が起こることもほとんどないと思います。
また自分の経験則として、いくつか気を付けておいた方が良い点があります。
（この当たりのTipsは、賛否あるかもしれません）
デザイン時にCSSのことを絶対に考えない
実装の事をデザイン中に考えていると、自分が実装できる範囲のCSSを考えてしまいがちです。
フロントエンドに自信がないほど単調で退屈なデザインに寄っていきます。
明日の実装は明日の自分が考えてくれるので、思う存分にデザインを作りましょう。
デスクトップ/スマホビューを並行して作らない
これは個人的に気を付けていることなのですが、デスクトップ向けのデザインを作るなら先に全部完成させて、次にスマホ用のデザインを落とし込むようにしています。
1つ目の理由は 無意識的にデザインに制約をかけないため です。前述の「CSSのことを考えない」と同様の理由なのですが、並行して作っていると縦向き・横向きデザイン両方に適用できるシンプルなデザインを考えてしまいがちで、レイアウトに自由度が出ません。
そもそもデスクトップとスマホでは表示できる量も、画面比率も違います。
どうせ比率が違えば配置を大きく変えなければならないため、変に共通できるデザインを無理に捻りだすより、先に完成したデザインをベースとして変更していく方が楽です。
2つ目の理由は 何度も作り直しをしないため です。デザイン制作の中盤～後半に差し掛かったあたりで、途中で下のセクションと配色が被ったりして修正したくなったり、いい感じの別デザインが思いついたりして、そこまで作ったデザインを調整したくなる場面が出てきます。
こういった時にスマホビューと並行して作っていると、両方変更しなければならず手間が大きいので、一旦全体が完成してから作ったほうが効率的です。
Tips: プロトタイプの製作について
「動作サンプルとしてプロトタイプは作らないの？」という意見もありますが、個人製作では不要だと思ってます。
確かに製品としてWebサイトを製作する際は、納品先とのやり取りもあるため大切です。しかし個人製作では手間がかかる割にメリットが少ないように感じます。
またFigma, Xdといったデザインツールに慣れていない場合、プロトタイプ関連の機能を覚える学習コストも高いです。デザインツールの学習を目的としないのであれば、避けても構わないと思います。
自分はプロトタイプを製作しない代わりに、アニメーションや遷移についてFigmaにコメントを残して後で分かりやすいようにしています。
[2] 技術スタックの検討・環境構築
デザインが出来たら、いざ実装…と言いたいところですが、その前にどういったフレームワーク・ライブラリを使うのか決めます。土台がしっかりしていた方が、安心して開発ができますよね。
[2-1]ホスティングサービスを決める
まず最初にWebサイトをどのサービスに置くか考えます。
何処でホスティングするかによって使えるフレームワーク・ライブラリの幅も変わります。料金の問題や管理コストの問題も入ってきます。自分に合った選択をしましょう。
HTML/CSS/JSだけのシンプルな構成のポートフォリオであれば、静的ホスティングサービスを使えばよいですし、PHPなどでDB等のバックエンドの処理が必要なら、レンタルサーバーを検討しましょう。
もっと高度なことをやったり、自分が普段使っているクラウドと共用させるのであれば、各種VPSを使ったり、EC2を使ったりするのもアリです。
以下にサービスの一例を挙げておきます。日々いろんなものが出てくるので、「静的ホスティング」「レンタルサーバー」といったワードで適宜調べてみてください。来年になったらサービスがなくなったり、もっといいサービスが出てくることもあるので…。
- 静的ホスティング
- Github Pages
- Amazon S3 (+ CloudFront)
- Static Web Apps (Azure)
- レンタルサーバー
- VPS
(EC2やCloud Runを使う方はそもそもバックエンドに詳しいと思うので、説明は不要でしょう）
自分はドメイン無料かつ、LiteSpeed LSAPIで高速＆最新のPHPが使えるという点から、長らくConoha Wingを使っています(時々WEXALとケンカするのですが……)。レンタルサーバーはサーバ管理周りのコストも低いので、フロントの開発に集中したい人にはオススメです。
[2-2]フレームワーク・ライブラリの選定
ホスティング先が決まったら、それに合わせてどんなフレームワーク・ライブラリを使っていくか選定していきます。
バックエンド
DBを扱ったり、バックエンドで何かしら走らせるのであればこの辺を使います。自分の好きな言語を使えばいいと思いますが、レンタルサーバではPHPしか大体使えないので、ホスティングサービスの事も意識しましょう。
静的ホスティングなら、この辺は要りません。
フロントエンド
ここからが本題です。まず軸となる、WebのUI部分を取り扱うライブラリを検討します。
HTMLやCSS、Javascriptの知識は必須になるため、全くフロントエンドが初めてなのであれば、その辺りを触れておきます。
基本的には何を使うにしても、フロントエンドの環境構築にNode.jsは使うことになります。Node.js自体がどんなヤツなのか、またnpmやpackage.jsonの設定といった基本中の基本はカバーしておきましょう。
モダンな開発をしたいなら、ReactかVueの二択です。
この二つであればまずネット上に情報が溢れているので、困った時に検索すれば何かしらの解決策を得られるでしょう。新しいもの好きなら Svelteもお勧めですが、まだ情報が少ないのでトラブルが起きた時の対応が大変かも。
jQueryも有名ですが、Vue/Reactに比べて処理が重くなり、他のライブラリと競合することもあるので、今から学習し始めるのであればあまりお勧めできません。
jQueryが決して悪というわけではないので、既に経験があってどうしても使いたい場合は、導入しても構わないと思います。
モダンな開発をしたいなら、絶対にHot Reloadの環境だけは整えるようにしましょう。
簡単に言うと、コードを保存したら自動的にブラウザ側に変更が反映されるような仕組みです。これがあるとないとで、開発スピードに段違いに差が付きます。カメとパタスモンキーぐらいの差です。
また Server Side Rendering(SSR) や Static Site Generator(SSG) といった技術を使うのであれば、ReactならNext.js、VueならNuxtの導入を検討しても良いです。
NextやNuxtを使わなくても、Viteを開発環境として入れておくと便利です。後述するTypescriptやSassなどがすぐ使え、開発中のホットリロードが出来るので効率的です。ビルドも非常に高速です(SSRもできます)。
例えば Laravel なら、Viteがセットで提供されており効果的に利用できます。フレームワークで推奨されているライブラリがある場合は、その辺りも加味して利用しましょう。
開発体験・効率の向上
開発を行う上では、面倒ごとは極力避けて開発に集中したい、というのが全エンジニアの願望なのではないでしょうか……
Web開発においても同じことが言えますが、開発体験や不要なバグの防止を目的として、よく使われている技術・ライブラリのメジャーどころを挙げておきます。
-
Typescript
- Javascriptを拡張し、静的型付けができる
- 型付けに加えinterfaceの定義ができることで、エディタ上でのコード補完が強力
-
ESLint
- 静的コード検証ツール
- 構文エラーや問題のあるコードを事前に検証することで、バグを発生させずに済む
-
Prettier
- コードを自動できれいにしてくれるコードフォーマッター
- あまり気にせずコードを書いてもキレイになるので、後で読み返しやすい
[2-3]デザインを実装するために使うライブラリを選定する
開発のベースとなるフレームワーク・ライブラリが決まったら、デザインの実装に関連するライブラリを選定していきます。
CSSのメタ言語
メタ言語というと何のことだ？という感じですが、要はSass, SCSSやStylus などの事です。
標準のCSSに比べて書きやすくなるので、基本的に何かしら採用することを推奨します。
特に拘りがなければSassがお勧めです。
CSSライブラリ
CSS関係は頻繁にトレンドが変化していくので、とりあえず困ったら State of CSSを見てトレンドを把握しておきましょう。
現時点でのおすすめは Tailwind CSS です。
Open PropsやUnoCSSが気になるところではありますが、まだ情報が少ないのでCSSに自信がなければもう少し待っても良さそうです。
アニメーション
CSSでもアニメーションはできますが、複雑なアニメーションをするならJavascriptを叩きます。アニメーションの必要があれば各種ライブラリを入れておいた方が効率的に開発できます。
ライブラリの選定において、自分のしたいアニメーションについて何が必要か把握しておく必要があります。具体的には以下の3つに分類できると思います。
- HTMLのDOM要素を動かしたい
- SVGの形状をアニメーションさせたい
- WebGLを使って、高度なアニメーションがしたい
ライブラリによって扱うものが異なるため、対応したものを導入するようにしましょう。以下に例を挙げます。
-
Anime.js
- シンプルで扱いやすいアニメーションライブラリ
- 最近Anime.js V4のEarly Accessが始まったようです
-
GSAP
- 超有名・高機能なライブラリ 色々できる
- 有料ライセンスでないとやや制約あり
-
Three.js
- WebGLで3Dを扱うならこれ
- 3Dはかなりリッチな表現になるが、知識が必要になるためハードルは高い
※Anime.jsでいい感じのSNSリンクページを実装した例 ( anime.stagger を使うと簡単に実装できます)
特定用途のためのライブラリ
グラフを扱う、途中のセクションで横にスクロールする挙動を作る、といった特定の用途に便利なライブラリも多く存在します。
実装が面倒そうなものは、ライブラリを積極的に使用していくとQoLが上がります。以下に一例を挙げておきます。
-
ScrollMagic
- スクロールに応じて要素をアニメーションさせる
-
Chart.js
- リッチなグラフを簡単に実装できる
-
Lightbox2
- 画像をクリックすると大きく表示する
-
Swiper
- カルーセルを簡単に実装できる
[2-4]開発環境を構築する
使用するライブラリが選定できたら、環境構築を進めていきましょう。
ひたすら導入していくだけといえばそれまでですが、導入したライブラリに応じてコンフィグ関係の設定が必要になるので、公式のドキュメントや二次情報を参考にして進めていきます。
慣れておらず心配なのであれば、ライブラリを入れたら都度動作確認をした方が無難です。フロントエンド開発は大量にライブラリを導入するので、確認を怠ると問題の切り分けが難しくなってしまいます……
Tips: Docker環境導入の是非
Docker環境を構築することは推奨はしますが、必須というわけではありません。バックエンド開発者なら触ったことがあるので問題ないと思いますが、学習コストはそこそこ高いです。
もしDockerがなくても、Laravelであればphp artisan serveが使えますし、Viteならnpx viteで開発サーバーを立ち上げられます。
ただしルーティングを含め、本番環境と限りなく近い環境でテストするという視点では、やはりDocker環境を利用するのがベストプラクティスであることに間違いありません。
また家はデスクトップ、外ではノート、のように複数のデバイス・OSで開発したり、長期間に渡りメンテナンスするのであれば、将来のことを見据えて確実に導入したほうが良いでしょう。
[3]実装する
ここまで来たら、後は実際にコーディングしてサイトを作っていきましょう。
デザインや環境構築と異なり、実際に作っていく工程は進捗が目に見えることもあり、モチベーションの維持も比較的容易です……と言いたいところですが、強大なるCSSの壁が待ち構えています。
慣れるまで思ったようなデザインが作れず、心が折れがちです。無理のない範囲で気長に進めていきましょう。
ページ内をセクションごとに分け、一つずつ作っていく
制作時は「ヘッダーのメニュー」「ヒーローヘッダー」「#aboutのセクション」といったように、セクションごとに切り分けて、一つずつデスクトップとモバイルのレスポンシブ動作を確認しながら実装を進めていきましょう。
メンテナンスの面でもReactやVueを使っているのであれば、セクション単位で別々のコンポーネントに分離すると、後から修正に戻る際も素早く対応できます。
これについては [1-4]デザインを作成する と真逆のアプローチとなるのですが、CSSの実装時にモバイルビューとデスクトップビューでコードを共通化できる場合が多いので、並行して作ったほうが効率よく進められます。
逆にデスクトップビューの完成後にモバイルビュー実装を始めると、戻ってきたころに書いた内容を忘れて、うっかり共通化できるところを別々で書いてしまったりしがちです。"鉄は熱いうちに打て"というヤツです。
CSSでうまく配置できない時
CSSに慣れていないと、デザインに対して実装がうまくいかないことがあるかもしれません。
ヘッダーやハンバーガーメニュー、よくある画面右下のボタンなどはfixed を使います。
カード系のデザインは flex や grid を使って実装すると良いです。
細かい位置の調整が必要となる、画像や図形の複雑なデザインは、relative/absolute を使いましょう。レスポンシブ対応のために px より vw, vh などを使うと良いです。
それでもうまくいかない!
根性と気合で乗り切りましょう。他のかっこいいサイトを作ってるのも所詮は人間です。人間が作ったものは、あなたも人間なので大抵何とかなります。諦めない気持ちが大事です。
終わりに
いきなりWebフロントエンドを真面目にやろうとすると覚えることが多く、大変なのは間違いありません。デザインまで自分でやろうとするなら猶更です。
しかし開発する対象が漫然としている状態に比べて、どのような工程で開発を進め、どのような要素を学ぶべきなのか分かっていれば、自ずと今必要なもの・やるべきことが見えてくると思います。
皆様が楽しいWeb開発ライフを送れることを祈っております🙇♂️