これからWebサイトをつくって、Webデザイナー/Webクリエイターになりたいという方へ、必要なもの・知識をお伝えしたいと思います。もちろん人によって考え方や必要だと思うものに違いはあるので、１つの例として参考にして頂ければ幸いです。
独学力、検索力
自分で調べて解決する能力はとても重要です。特にWebサイト制作は覚えなければならない知識が多く、新しい技術もどんどん出てきます。
独学でやるか専門学校/パソコンスクールに通うか、どちらが良いか迷っている人もいると思いますが仕事としてWeb制作をすることになれば、日々業務の予習・復習や新しい技術の情報収集・勉強が必要になってくるので、どちらにしても最終的には独学力が必要になってきます。
どちらを選択しても良いと思いますが、専門学校/パソコンスクールに通うメリットとしては同じ目標を持った人たちと知り合うことができる、プレゼンテーションの練習ができる、チームでの制作を経験できる、デザインに対する考え方、捉え方が人によって色々あることを知れる、講師に色々質問や相談ができる、など独学では得られないものが結構あるので、専門学校/パソコンスクールに通う選択も良いでしょう。
経験のあるクリエイターさんでも全てのことを知っているわけではありません。実際、私も未経験でWeb制作会社に入ったときは毎日色々なことを調べながら業務をしていました。Web業界は上司/先輩に手取り足取り教えてもらえる環境はあまりないと思いますので、自分で情報収集して色々な知識を得ていくことが大切です。
このブログでも色々なWebサイト制作に関する用語を紹介していきますが詳細に説明するものもあれば簡潔に用語の紹介だけするものもあると思いますので、ご自身でも調べることを習慣にしてもらえればと思っています。
パソコン
パソコンはWebサイトをつくるときにはWindows、Macどちらでも好きな方で良いです。ただ、Webサイトを閲覧するブラウザでレイアウトの崩れや表示、動作などの不具合がないかチェックする作業を行うときに、主要なブラウザであるMicrosoft Edge、Google Chrome、Firefox、Safariで確認することが多く、案件によってはInternet Explorer(2022年6月16日サポート終了予定)での確認が必要なこともあり、Macは初期状態ではInternet Explorerでの確認ができないのですが、ソフトウェアを使ってMacにWindowsを導入して確認したり、仮想マシンツールや他のツールやサービスで確認することができます。
しかしWindows版のSafariは2012年にApple社が提供を終了していることと、一部スクリーンショットを撮ってくれるサービスがあったりしますが、Safariのバージョンが古かったり、回数制限があったりするので、現状WindowsでSafariの確認をするのは困難になっています。
また、非公式のWindows版Safariのダウンロードサイトがあるようですが、公式サポートではないので脆弱性など危険がある可能性を考えると使用しない方が良いでしょう。
Safariと同じWebkit系のブラウザであるGoogle Chromeで確認してOKだったらSafariで確認しなくても大丈夫なんじゃないかと考えている人もいるかもしれませんが、過去に私はWindowsのGoogle Chromeでサイト制作して、MacのGoogle Chromeで確認したら問題なかったのですがMacのSafariで確認したら、見出しのタイトルを１行で表示させたかったところが、改行されて２行になってしまっていたことがあったので、やはり極力確認した方が良いです。お友達・お知り合いでMacを持ってる人がいれば確認させてもらえるよう頼んでみるのも良いでしょう。
もし周りにMacを持ってる人がいなければ私はWebサイト制作だけでなく、Webサイト検証のお仕事も承っておりますので、ご相談頂ければと思います。
上記の点を踏まえると、理想はWindows、Mac両方あれば良いですが、これからWeb制作用にパソコンを用意するのであれば、個人的にはMacをお勧めします。
例えばWebデザインだけではなく、Webサービスも開発したくなったときにもMacの方が比較的開発環境を整えやすかったりします。あと、ブログをやってるWebクリエイターさんはMacを使ってる割合が高くMacに関する話題も結構多かったりします。
パソコンのスペックはWebデザインで使用するだけであればそれほど高いスペックのものでなくて大丈夫です。もちろんスペックが高い方がデザイン系のソフトの動作がより軽くなったり、動画編集などもするのであればあまりストレスなくできるとは思いますので、そこは予算と相談してパソコンを準備して下さい。
スマートフォン、タブレット
最近はスマートフォンからサイトを閲覧する人も多く、スマートフォンに対応したWebサイトの制作を求められることも多いので、理想はiPhone(iOS)、Androidどちらもあれば良いです。スマートフォンは種類が多い為、全ての機種で確認するのは現実的ではないので、結局はシミュレーター/エミュレータを使っていくつかの機種を確認することにはなるのですがサイトの操作性などは、やはり実機で操作した方がわかりやすいので、できる限り実機でも確認できるようにしておきたいところです。タブレットもiOS、Android両方の端末があればなお良いです。
ブラウザ
制作はブラウザでの表示を定期的に確認しながら行うことになりますが、その時に使用するブラウザは好みのもので大丈夫です。その後、各ブラウザで表示チェックの作業をする時に、ブラウザシェアで主要なブラウザ、Microsoft Edge、Google Chrome、Firefox、Safariはすべて確認するようにしましょう。案件によってはInternet Explorer(2022年6月16日サポート終了予定)での確認が必要になることもあります。
ブラウザチェックは指定や要望がない限り、最新バージョンor比較的新しいバージョンで確認すれば良いでしょう。
スマートフォンのブラウザも色々種類があるのですが、使用ユーザーが多い主要なブラウザで確認して、その他はケースバイケースで対応すれば良いと思います。
テキストエディタ
テキストエディタも種類がたくさんあるので色々試してみて、自分にあったものを選ぶと良いでしょう。私がWebの勉強を始めた頃はサクラエディタ、秀丸、miなどのエディタを使っていましたが、最近ではAtom、Brackets、Sublime Text、Visual Studio Codeなどが高機能でカスタマイズ性もよく人気があるようです。
私は今はVisual Studio Codeを使っているのですが、豊富な拡張機能があって色々カスタマイズ可能なので、とても使いやすく快適に作業できており、すごく満足しています。
色々なテキストエディタを試してきましたが、今のところ個人的にはVisual Studio Codeが一番おすすめです。
ソフト、ツール
AdobeのPhotoshop、Illustrator、XDの3つのソフトウェアはできる限り揃えましょう。WebページのデザインをつくるときはPhotoshopでする人、Illustratorでする人、XDでする人、好みによってわかれるので、得意なソフト、好きなソフトを使えば良いのですが、写真編集はPhotoshopで、イラスト系の素材などをつくるのはIllustratorで、ワイヤーフレームやデザインカンプはXDで、というようにそれぞれのソフトの長所を使い分けて作業を行う方が良いと思いますので、やはり3つあるのがベストですが、人によってはPhotoshopとXDしか使ってないという人もいますので、状況に応じて使用するソフトを揃えましょう。その他のAdobeソフトは動画編集も本格的にしたい、グラフィックデザインもしたい、などがあれば必要に応じて揃えると良いでしょう。
私がソフトを揃えたときは、Adobe Creative Suite 5.5というPhotoshop、Illustrator、Dreamweaver、Fireworksなど複数のソフトがセットになったパッケージを購入したので一度購入すればそれ以降費用が掛かることがなかったのですが、現在はパッケージ版はなくなっており、月額利用料を支払う形式になっています。「7日間の無料体験」があるのでまずはそちらで色々試してみて揃えたいソフトを検討していくと良いでしょう。
最初にどうしても費用を掛けたくないという方は「Adobe XD スターターキット」や「FigmaのStarterプラン」であれば基本無料で使用できるので、まずはそちらを試してみるのも良いかもしれません。
デザイン
デザインは見た目が良いだけのデザインではなく、サイトを閲覧する人にとってわかりやすさ、見やすさ、操作性、機能性などユーザビリティの良いデザインをつくることが大切です。
そのためにはレイアウト技法、サイトのイメージに合った配色、写真・画像の効果的な使い方など、色々な知識を身につけることが必要です。様々なジャンルのデザインをたくさん見て勉強しデザイン力を磨いていきましょう。
HTML / CSS
HTMLとCSSはWebサイト制作の基本ですので最優先で覚えましょう。アニメーションさせたり動的にコンテンツを生成したりするプログラミングは後で徐々に覚えていけば大丈夫です。
HTML / CSSの参考書を購入したり入門サイトを活用して勉強していきましょう。ある程度HTML / CSSのコードが書けるようになってきたら、参考書やインターネットで調べなくてもコードをスラスラ書けるようになるまでサンプルのサイトを何度もつくったりしてコードを書くことを習慣づけましょう。
プログラミング
プログラミングは必須というわけではありませんが、最近ではjQueryやWordPressなどを使っているサイトがとても多いので、基本的なプログラミング力はつけておいた方が良いです。
jQuery(JavaScript)やPHPの基礎は余裕ができてきたときに少しずつ勉強していきましょう。
サーバー / FTPクライアントソフト
Webサイトを公開するためには、サーバーが必要です。レンタルサーバーやVPS（仮想専用サーバ）のサービスを利用することになります。サービス・プランの種類が多いので、費用、スペック、機能、サポートなど、ご自身が求める用途で選びましょう。
FTPクライアントはサーバーにファイルをアップロードする際に必要になります。こちらも種類はいろいろあります。
ローカル開発環境
ローカル開発環境は本番で公開するサーバーに近い環境でWebサイトを構築&確認することができます。
例えば、サーバーサイドのプログラミング言語であるPHPを使用するWordPressでサイトを構築するときなどにあると便利です。XAMMPやMAMPというアプリケーションでお手軽にローカル開発環境を整えることができます。
もっと自分好みにカスタマイズしたローカル開発環境をつくりたい場合はVirtualBoxとVagrantで環境を整えると良いでしょう。
著作権
著作権についての知識は非常に重要です。例えば無料素材や有料素材を使用する場合、ライセンスや利用規約をよく確認するようにしましょう。また、ライセンスや利用規約は変わることもあるので、利用するときは毎回確認するようにしましょう。
ここまで一通り必要なもの・知識について挙げてきました。長々とした文章になってしまい申し訳ないのですが、これでもだいぶ省略して書いたつもりです。それだけWebは覚えなければならないことが多くて大変ですが、その分できることがどんどん増えていって制作するのが楽しくなってきます。もっと掘り下げて説明したい箇所もいくつかあるのですが、それは他の記事で紹介できればと思います。ここまでお付き合い頂き、ありがとうございました。
