10年前にWebサイト制作の現場を離れた方へ

僕がWebサイト制作の業界に入って8年（独学やスクールでの学習期間を含めると約10年）経過しました。

そこで、何かの理由で10年前からWebサイト制作の現場を離れている方へ向けて、現在僕が行っているサイト制作の概要について、まとめたいと思います。

以下の方を対象に記事を書いてます
・基本的なHTML/CSSを理解している方
・10年前に現場を離れた方
・現場に戻ろうと考えている方
・現在のWebサイト制作を知りたい方

※注意1：僕の主観的な制作方法なので参考程度にご覧ください
※注意2：すべての主語は「僕」ですので脳内変換をお願いします
※注意3：OSはMacで解説します

１）10年前と現在の違い

〜10年前〜
・デスクトップ向けがメイン
・Adobe Flashの衰退期
・WordPressの黎明期
・Fireworksが現役

〜現在〜
・スマホ向けがメイン（レスポンシブ）
・Adobe Flashのサポート終了
・WordPressがメイン
・Fireworksは終了しXDが登場

２）制作フロー

僕が行う制作フロー（ヒアリングなどの前工程は飛ばします）を軸に、現在行っている制作方法についてまとめます。

①デザインカンプ作成
②ベースコーディング
③CMS組込み

３）デザインカンプ作成

デザインカンプは［Photoshop］か［AdobeXD］で制作しています（僕は使いませんがIllustratorも）。

その他のアプリケーション
・Sketch
・Figma

Sketchはエンジニアさんが好んで利用、Figmaはデザインチームで利用されてる印象です。僕はどちらも使っていません。

３−１）Photoshop

Photoshopの進化はめざましく、カンプ作成の時間はどんどん短縮されています。僕がよく利用する新機能をまとめます。

------------------------------

【画像アセットの生成】

10年前はスライスツールを使って、画像を一枚一枚書き出していました。
現在は画像アセットの生成（［ファイル］→［生成］→［画像アセット］）を利用することで、自動で画像の書き出しが行えます。

ベテランほど知らずに損してるPhotoshopの新常識（4）まだスライスで消耗してるの？「画像アセットの生成」でスライス不要のサクサク切り出し - Adobe Blog

------------------------------

【Camera Rawフィルター】

10年前はレイヤーを重ねて色調補正など行っていましたが、現在はCamera Rawフィルター（［フィルター］→［Camera Rawフィルター］）を利用すれば、再編集可能な状態で直感的に画像の補正が行えます。

Photoshopの画像加工が楽になる！Camera Rawフィルターを使った色調補正の方法|haconiwa

色調補正以外にも変形ツールを利用して、屋内写真の縦のパースを簡単に垂直へ合わせることができます。

------------------------------

【コンテンツに応じた塗りつぶし】

10年前には画像の範囲が足りない時は、グラデーションツールなどを利用して境界線の先まで範囲を増やしていましたが、現在はコンテンツに応じた塗りつぶし（［塗りつぶしたいエリアに選択範囲を作成］→［編集］→［コンテンツに応じた塗りつぶし］）を利用すれば、Photoshopが自動でよしなに塗りつぶしてくれます。

「コンテンツに応じた塗りつぶし」で写真から不要物をすばやく消去

------------------------------

【被写体を選択】

10年前の切り抜きはペンツールでパスを作成→選択範囲でマスクの流れでしたが、現在は被写体を選択（［選択範囲］→［被写体を選択］）であっという間にマスクを掛けられます。

「被写体を選択」を使って補正対象にすばやく選択範囲を作成

３−２）Adobe XD

Fireworksが無くなった代わりに（まだ使えないことはない…）、AdobeXDが登場しました。とにかく操作が軽快で、MacとWinなどOSを選ばずに利用できるのが最高です。

------------------------------

【共有】

10年前はクライアントにデザインチェックを依頼する時、jpeやpdfでデータを送付するか、jpgを1枚貼り付けたWebページを作って確認してもらいましが、現在は共有リンクの発行を行うことで、クライアントチェックを簡単に依頼できます。

6-1. 共有モードの基本操作 | UI/UXデザインツール『Adobe XD』入門

開発者プレビューの状態で共有すると、上下の距離やフォントサイズなどの情報もブラウザで確認できるので、コーディングを依頼する場面でも大活躍します。

------------------------------

【プロトタイプ】

10年前には実際にコーディングを進めて、簡単な画面遷移の確認を行っていましたが、現在はプロトタイプを利用することで、ブラウザでWebサイトの操作を行うことができます。

5-1. プロトタイプモードの基本操作 | UI/UXデザインツール『Adobe XD』入門

４）ベースコーディング

ベースコーディングの方法も大きく変わりました。
10年前はデスクトップをメインにレイアウトを構成しており、操作もキーボードとマウスを想定していました。

４−１）レスポンシブデザイン

スマホの利用率が高まる中でレスポンシブデザインがメジャーになり、様々なデバイスの画面サイズに適したレイアウトや、通信環境やデバイスの処理能力に配慮するモバイルファーストなコーディングが求められています。

------------------------------

【ブレイクポイントとメディアクエリ】

表示されているブラウザの幅に応じてブレイクポイントを用意して、CSSの内容を変更できるメディアクエリを利用します。

メディアクエリの使用

メディアクエリの記述例

.hoge{
  font-size: 16px;
}

@media screen and (min-width:768px){
  /*ブラウザの幅が768px以上の時*/
  .hoge{
    font-size: 18px;
  }
}

@media screen and (min-width:1200px){
  /*ブラウザの幅が1200px以上の時*/
  .hoge{
    font-size: 20px;
  }
}

------------------------------

【Sass（SCSS）】

現在はCSSを記述する時に、メタ言語（CSSプリプロセッサ）のSass（SCSS）を利用します。
要するにプログラムを書いてコンパイルすることで、効率よくCSSを書きましょうという事です。

Sass（SCSS）でCSSコーディングを効率化・メリットと使い方を知る

Sass（SCSS）のコンパイルには専用のアプリケーションが必要ですが、CUIのものが多くてコマンドでの操作が苦手な方には厳しいです。

僕はGUIで操作できるPreprosを利用しています。

Your Friendly Web Development Companion

４−２）エディタ

10年前はDreamweaverでコーディングしており、サイトの管理機能やライブラリを使って共通パーツをコンパイルしてFTPでアップしてました。

現在は、CMSを利用することが多いので、ローカル環境を作ってWordPressをインストールして、そこで構築を行います。

------------------------------

【Visual Studio Code】

僕がエディターに求めることは少ないのですが、以下の感じです。

・操作が軽快
・一括置換機能がある
・Emmetが使える
※要するにこだわりはありません。

これに加えて、ターミナル機能が付いているのがVisual Studio Codeです。

Visual Studio Code - Code Editing. Redefined

WordPressのローカル環境にDockerを利用しているので、ターミナルが利用できるのはありがたいです（他のエディタでもターミナルは使えるかもしれません…）。

フロントエンドエンジニアさんは、GulpやGruntなどのタスクランナーを使ってコンパイルされるようですが、僕はそこまでたどり着けていません（Preprosで十分です）。

５）CMS組込み

前述したように、当時はDreamweaverのサイトの管理を行ってライブラリやテンプレート機能を利用して、共通部分の効率的な制作を行っていました。

現在はWordPressを使ってサーバー上でHTMLを動的に生成する方法が主流で、PHPを利用する必要があります。

そして、その先にはmicroCMSなどのヘッドレスCMSと呼ばれる技術が登場しており、Webサーバーが不要な状態でコンテンツのマネジメントが行える時代が来ています。

５−１）WordPress

世界で一番使われているCMSであるWordPressですが、プラグインやテーマの数が多く、Webサイト制作の知識が無くてもコンテンツがマネジメントできます。

例えば、お問い合わせフォームの作成、xmlサイトマップの生成、関連記事の自動表示など、サイトに必要な基本構成は全部作れると思います。

------------------------------

【ローカル環境（Local by Flywheel）】

一番簡単なWordPressのローカル環境の構築には、このLocal by Flywheelを利用します。

Local

導入の手順はこちら

超簡単にローカル環境が構築できるLocalbyFlywheelの使い方

------------------------------

【ローカル環境（Docker）】

僕がクライアントワークで利用しているローカル環境はDockerです。
あまり詳しくないのでエンジニアに相談しながら使っていますが、manpと比べて使いやすい印象です。

Docker: Accelerated Container Application DevelopmentHome

WordPressの環境構築はこちら

Docker ComposeでWordPressを構築する[WordPress]

------------------------------

【有料テーマ（国産）】

僕はWordPressのテーマは自分で作るので、あまり詳しくないです。
ですので、利用したことは無いですが、巷で人気の国産テーマを3つご案内します。

↓キタジマタカシさん（@inc2734）が開発されているSnow Monkey。

WordPress テーマ Snow Monkey

↓ひつじさん（@hituji_1234）が開発されているJIN。

JIN（ジン）｜真の使いやすさを追求したWordPressテーマ

↓了さん（@ddryo_loos）が開発されているSWELL。

SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ

５−２）Git

最後に、10年前は社内サーバーとDreamweaverで管理していたWebサイトのデータですが、現在はGitを利用しています。

Gitとは、ソースコードのバージョン管理システムです。
僕もしっかり理解できていないので、詳しくは以下の記事をご覧ください。

サル先生のGit入門サル先生のGit入門〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】

------------------------------

【GitHub】

僕はGitのリモートリポジトリにGitHubを利用しています。

GitHub Japan

GitHubの使い方はこちら

今さら聞けない！GitHubの使い方【超初心者向け】今さら聞けない！GitHubの使い方【超初心者向け】 | TechAcademyマガジン

------------------------------

【SourceTree】

ターミナルのコマンド操作が苦手なので、GUIのGitクライアントツールはSourceTreeを利用しています。

Sourcetree - 無料の Git & Mercurial クライアント | Atlassian

SourceTreeの使い方はこちら

誰でも簡単！GitHubで管理するためのSourcetreeの最低限の使い方 | HPcode

６）まとめ

最後まで読んで頂いてありがとうございます。
かなりざっくり目次を洗い出した程度ですが、10年前と現在の方法の違いについて、少しでも参考になれば幸いです。

また機会があれば、それぞれについて詳しい記事も書こうと思います。

運営しているWebデザイン1on1レッスンチャンネルにて「元Webデザイナーがモダンなサイト制作を学ぶ」というレッスンを行っております。
興味のある方は是非一度ご覧ください。

Hiradaさん｜元Webデザイナーがモダンなサイト制作を学ぶ
URL：https://1on1.design/students/3

※Hiradaさんの授業はゆるく楽しく笑いありで行っているので、しっかり学びたい方には向かないと思います…w笑

記事の良いねやシェアをしてもらえると大変嬉しいです^^！
これを励みに次回の記事もがんばります！！