こんにちは、Web未経験支援や独立支援をしているタカハシです。
このブログでは、いままで自分の経験などから感じたことや、未経験からwebデザイナーになるなどの記事が中心でしたが、フリーランスになりスクールもやるようになったので、ブログでもその内容を反映していこうと思います。
そいて今回はシリーズ物として「超実践webデザイン」をお伝えしていきます。
内容は、コーディングからデザインなどを学んで最終的にWordPressのテーマを作るとこまでできればいいかなと思っています。
さて、今回は「Webデザイナーになるための作業環境を整えよう！」ということで、まずは身の回りのものやパソコンに入れておきたいアプリやツールを準備しましょう。
何事も準備が大事です。気持ちよくスピーディーに作業ができるように環境を整えましょう！
課題もあります！
過去記事も参考にどうぞ！
[card url=”http://web-tk.jeez.jp/wps/preparation/”]
※個人的な部分も含まれてるので、ご了承ください。
ちなみに僕の作業環境はMacを使ってるのでMacベースで進めていきます。
この記事の内容
Webデザインができるように作業環境を準備しよう！
情報収集用にSNSアカウントを有効活用
Webデザインをする上で一番大事なのが情報収集です。
これが効率よくできないと、ものすごく時間がかかります。
最低でも
・Facebook
・Twitter
のアカウントを作って下さい。
普通は情報を調べる時に、Googleなどで検索しますよね。
でもそれだと、知りたい情報しか知ることしかできません。
日常で効率よく自分が知りたいこと以外の情報がドンドン出てくるとなると、Twitterが最強です。
Web系の人やデザイン系の人をフォローしておけば、自然と最新情報が手にはいりますし、意外な情報もどんどん見つかります。
Facebookはイベントやリアルでの活動で使用して下さい。
- FacebookとTwitterのアカウントを作成する
- Twitterで1週間以内にWeb系の人を50人フォローする
コーディングエディターの導入
Brackets（ブラケッツ）
Bracketsとは、Adobe社が提供する、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Windows、Macなどで利用できる。
デフォルトで日本語に対応していたり、拡張しなくても最初から使えるので、初心者にはおすすめ。
ライブプレビュー機能と言うものが最初から搭載されており、かなり重宝します。
ちなみに僕は、Brackets（ブラケッツ）を使ってます。
[card url=”http://nelog.jp/brackets”]
- ブラケッツをインストールする
細かい設定や拡張機能については、コーディングに入る時にお伝えします。
デザインツールの導入
デザインツールといえばAdobe CCですね。
webデザインをする際に必ず必要になりますので、導入してください。
PhotoshopやIllustratorなど単品でも契約できますが、どちらにしても便利なツールが多いので【コンプリートプラン】にしておいたほうがいいです。
職業訓練生だと学割を使えますので、ちょっとお得です。
このブログの「超実践webデザイン」では、メインにIllustratorを使います。
写真加工系はフォトショップを使用します。
キャンペーンなどで、安く購入できたりもします。大体アプリ単体で980円の時もありますね。
複数のブラウザ・検証機の導入
webサイトを作るときに困ることの一つにブラウザごとの差異があります。
コチラはweb制作をしていると避けては通れない道となっています。
検証用に最低限揃えておきたい物は、
- Chrome
- Internet Explorer
- Firefox
- Safari
- ios（iphone・スマホ）
- Android（スマホ）
- タブレット
検証機がない場合
基本ブラウザは、Chromeで作業して検証のときだけその他で確認する方法を僕は取っています。
タブレットやスマホの実機がない方は、簡易的にデバイスごとに確認できるサイトを紹介します。
【Responsive View】
URLを入れるだけで、スマホ、タブレット、PCの確認ができます。
http://responsiv.eu/
【Responsive checker】
基本的には上記のサイトと同じです。
http://html5-lab.jp/checker/
スマホアプリを開発するXcodeでiosのシュミレーターが使えます。
[card url=”https://liginc.co.jp/web/tool/mac-iphone/45329″]
あくまでも簡易的な検証ですので、実機でのエラーが起こった場合は実機でないと確認できません。
まとめ
いくつか課題をだしましたが、次までに準備をお願いします！
最初の環境をちゃんと作れていないと、あとあと苦労しますよ。
次は、コーディングの設定とHTMLの基礎について触れていきます。
