こんにちは！
この記事はWebデザイン初学者のための、
- 画像編集ソフト/ツール選び
- フリー写真素材サイト
について、代表的なソフトと、私が実際に購入したソフト、よく利用するサイトをまとめた備忘録です。
Web制作の流れをおさらい
そもそもWebデザインってなにをすること？
まずは個人でいちから全部Web制作する場合の流れを一度整理しておきましょう。
フリーランスで制作を請け負ったりする場合や、企業でいち社員としてWeb制作に関わる場合は、それぞれ分業されていたり、この流れ以外にも提案や見積もり、納品などのフローが入ってくることになります。
- Webサイトを企画・設計する：
Webサイトを作る目的、ターゲット、コンセプトなどの概要を決めて、どういったサイト構造にするかサイトマップ、ワイヤーフレーム、カラーを設計します。 - Webサイトをデザインする：
１の設計を元に、Webサイトの見た目をデザインします。必要な画像を用意したり、サイト内の幅や高さ、色などを細かくデザインし、あとはコードを書くだけの状態にします。 - Webサイトをコーディングする：
２のデザインをWebページとして形に起こします。プログラミング言語を使ってコードを書いて、必要なファイルを作成します。 - Webサイトをテスト・公開する：
コーディングが終わったら、きちんと表示されるか、不具合がないか確認します。問題なければ公開しましょう。検索エンジンに登録したり広告を貼ったり、公開してからアクセスを増やすために対策が必要になります。
個人で作る場合のWeb制作のフローは、大まかにこんな流れになってます。
このうちWebデザインは２番目の段階のことです。
Webデザインが一般的に、Webデザイナーの仕事の領分です。
個人でWebデザインするなら必要になる！写真・画像編集ソフト
つまり、画像を用意して、色、幅、高さ、サイズなんかをデザインしてからコーディングに進みたい。
手書きだけではどういった見た目になるかが正確にはわからないので、一度画像編集ソフトの中で、作りたいホームページの見た目だけ作って並べてみる必要があります。
Webサイトをデザインするためのソフト
Adobe Illustrator/Photoshop
一番有名で、プロの方の多くが使っているのはAdobeです。
- Illustrator：
ベクター画像、Webデザインのワイヤーフレーム（レイアウトの設計図）作成 - Photoshop：
フィルター、合成、余計な部分のみ削除など、高機能な写真の編集
最近は買い切りのソフトではなく、毎月のサブスクリプションサービスになっていて、どちらも使いたい場合、年間で考えると結構高額になります。
他のAdobe製品と連携させて使いたい時は、こちらが正解かも。
ずっとビジネスとしてWebデザインメインのフリーランスでやっていこうと思うなら、外部とのファイルのやりとりの観点から、導入を検討すべきかもしれないです。
AFFINITY
Illustratorとファイル互換性がある高機能な買い切りの画像編集ソフト。
PDF互換の.Aiファイル→読み込み
.PSDファイル→読み込み＆書き出しができる。
- Affinity Designer:
機能はほとんど Illustratorと遜色なし - Affinity Photo:
機能はほとんどPhotoshopと遜色なし
わたくし、こちらを買いました（半額以下のセール中だったのでつい）。
使ってみた結果、機能的にもわたしが作る画像には、AFFINITYで必要十分でした。
というかWebデザインに必要な機能は全部揃ってる、足りないところがないのに、とっても安いです、なにこれどういうこと。iPad版もあるし。
日本語字幕のチュートリアルが公式サイトにあるので、使い方や機能もちゃんと勉強できましたよ。
おそらく、わたしの場合Webデザイナーさんからファイルをもらうことはあっても、こちらが作ったデザインファイルをデザイナーさんに渡すことはないのではと思って、Affinityを使ってみてます。
もしAdobeじゃないとダメな状況になったら、操作性は似ているみたいなのでそのとき考える方針。
Webデザインに使える無料の画像編集ソフト
Affinityの前に、フリーソフトも試してみました。現在は使ってません。
Inkscape
フリーなのに、ベクター画像といって、拡大してもぼやけないイラストが描けるソフトです。
（IllustratorとAffinityでももちろん描けます。）
操作性が独特なので、後々Illustratorなどに乗り換えも考えている場合は、あまりおすすめしません。
でも使いこなせたら高機能なもよう。選択肢の一つとして。
Webデザインに使える無料の画像編集サイト
Canva
こちらはヘッダー画像とアイキャッチの作成に大変活用させてもらってます。
何がいいって、無料版でもフリー画像素材がたくさん使えて、サイズ設定も簡単なところ。
まだ使ってない人は試した方がいいです。
Web制作で使えるおしゃれなフリー素材サイト
Canvaでもフリー素材が豊富なんですが、たまに足りない時は商用可のフリー素材を利用させてもらってます。
Unsplash
おしゃれな写真素材がわんさか。
利用については写真ごとの注意書きを一応確認してください。
FREE LINE DESIGN
デザイナーさんが多分個人でやってるっぽいフリー素材のサイト。
姉妹サイトもたくさんあって、吹き出し、背景画像、ピクトグラム、シルエットイラストなどこれ、本当に無料でいいんすか？な素材がわんさか。
実際にWebデザインで使っているソフト＆サイトまとめ
たくさん紹介しましたが、今実際に使っているのは
- Affinity Designer
- Canva（無料版）
- Unsplash
- FREE LINE DESIGNとその姉妹サイト
（TopeconHeroesプロデュースのサイト）
です。
主に全体のデザインを考えるときにはAffinity、アイキャッチやロゴなどの画像はCanvaで作成しています。
次はサーバーのレンタルについてです。
