光陰矢の如く、あと１月ちょいもすれば新卒採用の新人webデザイナーも入社してくる時期となりました。

受け入れる側ももちろんですが、当の本人も「現状、webデザイナーとしてどこまで出来んの？」って不安は、どこかしら持ってるんじゃないでしょーか。

というコトで今回のエントリーでは、これから未経験でwebデザイナーの世界に飛び込んでくるという方に、とりあえずこれだけは知っといて！ってゆー基礎的な知識を、個人的見解ではありますが６つほどピックアップしてみたいと思います。

あくまで基礎 + 個人的なお話なので、鬼軍曹みたいな先輩にしてみれば「知ってて当然」くらいかもですが (^^;)

新人webデザイナーに知っていて欲しい基礎知識

1.「Photoshop / Illustrator」の基本的な操作方法

webデザイナーである以上、ココは絶対に外せないトコだと思います。

いくら「未経験からでもしっかり先輩がフォロー☆」とか言われてても、実際にはそんな甘い環境があるワケも無く、OJT（On-the-Job Training）という名の投げっ放しジャーマンが待っているのは自明の理ｗ

かくいう自分もそのクチでしたが、その時に一番しんどかったのが「Photoshopの各種ツールの使い方が分からない」というコトでした。

それまでは、ホームページビルダーに付随していた「ウェブアートデザイナー 」という、初心者用の扱いやすい画像加工ソフトを使っていたので、その違いたるや、泉ピン子と武井咲ほどの差。

しかも解説書を買ったところで手元に adobe の高価ソフトなどある訳も無く、会社で一人残ってひたすら勉強する毎日でした。

現在は Photoshop や Illustrator で出来るようなコトが再現可能なwebアプリも公開されており、特に Photoshop に関しては Sumo Paint 3.0 や Pixlr / Photo editor online などは、ツールの操作感もかなり似ている上に、こなれてくれば本家と同等の作品を作れるだけの高機能アプリなので、事前学習としても有効なツールになるんじゃないでしょーか。

ただし上記webアプリにも「ペンツール/パスツール（ペジェ曲線）」は実装されておらず、しかしペジェ曲線こそ当該ツールの真骨頂でもあるので、そこは実際に触れる機会があった時にトコトンやるといいよ！

参考サイト：

• Photoshop使い方サイト:www.fmod.jp
• 薮田織也の　フォトショップ早わかり　Photoshop Tips & Manual
• Adobe Illustrator CS4使い方辞典
• ITキヲスク | 【初心者でも】PhotoshopやIllustratorでのパス（ペジェ曲線）の使い方が、5時間で上達する方法【劇的に】
• Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能

2.「HTML」と「CSS」の基本的知識

アイコンやイラストなどのグラフィック専門デザイナーじゃない限り、なんだかんだ結局はココら辺の知識も必要になってくるんじゃないかと。

とはいえ「基本的知識」と言われてもザックリし過ぎて良くわからんちんだと思うので、ズバッと端的に、ココだけは押さえとけ！ってゆー必須事項をひとつ。

それは「読めるようになる」というコト！

書く際には当面ちょこちょこリファレンスや辞書を開いてもOKですが、読めませんとなると、それ以前の問題になっちゃいます。

アルファベットの羅列に怖気づかず、どの表記がどこの部分を指しているのかが分かるようになれば合格ラインかと思いますので、自信の無い方は気になったサイトのソースを見て、「どこの表示がどのように書かれているか」っつーのを調べるだけでも、読むスキルは結構身に付きますよ！

ちなみに未経験や事前知識の乏しい方にとっては、HTMLのタグやCSSのプロパティも結構な種類があって、辞書とか読んで一度に覚えようとしても挫折確実です。

が、実際にコーディングを行うようになると、実は良く使うタグやプロパティって案外限られてたりするので、重要なトコは自然と身に付きますからご安心を☆

それと補足事項として、2011年2月現在、この界隈では「HTML5」や「CSS3」というモノが取り沙汰されてます。

これは何かっつーと、現状で最新のHTML（HTML4.01）が発表されたのが1999年12月24日で、HTMLを再構築して作られたXHTMLの最新版（XHTML1.1）も2002年制定と、IT革命を経た現在では用途に見合わない仕様・足らないモノが増えすぎたので、ここらでドカンと包括的に改めようや！というコトで作成真っ只中にある、昨今のweb環境に適応させた新しいHTMLのコトです。

作成真っ只中とはいえ、比較的新しいブラウザでは一部機能が導入されてたりするので、この辺の成り行きも目の端に留めとくと吉。

参考サイト：

• HTMLクイックリファレンス
• 【HTMLタグの簡単検索】TAG index - ホームページ作成情報
• HTML手打ちで作るホームページ講座
• CSSレイアウト実践講座
• HTML5+CSS3 入門 | yoppa org

3.「ライセンス」に関する大まかな知識

個人で趣味的にデザインしてる時にはあまり考えないトコかと思いますが、実際に商用のデザインをするとなると、絶対に絶対に気をつけなければいけないのが、画像やイラストのライセンス。

世の中にはたくさんの「フリー素材」がありますが、だれが著作権を保持していて、実際どのような条件でならフリーで利用できるのか、コレの確認を怠ると最悪、訴訟問題にもなりかねません。

良くあるパターンとしては、リンク返しが必要だったり、素材を使ったページ内に著作者の名前の明記が必要だったり、再配布や販売が許されなかったり、などなど。

特にイラストやアイコンなんかでは「CCライセンス」というのが頻繁に使われていまずが、これは絶対に「著作者名の表示」を条件にしているライセンスなので、クライアントの存在する制作では実際のトコ使えない場合が多いです。

「自由」には「責任」が伴うように、「フリー」には「条件」が伴います。無用なリスクを避けるためにも、デザイナー諸氏は使用素材のライセンスをしっかり把握するようにしましょー♪

参考サイト：

• ITキヲスク | GPLやMITやCCなど主要ライセンスの内容と意味のまとめ
• さまざまなライセンスとそれらについての解説 - GNU プロジェクト - フリーソフトウェア財団 (FSF)
• さまざまなオープンソースライセンスをまとめてみた。 - 乱筆乱文お許し下さいorz
• オープンソースライセンスいろはのい - livedoor ディレクターブログ

4.「ほう・れん・そう（報告・連絡・相談）」と「納期遵守」の徹底

これはデザイナーというより社会人としての振る舞いではありますが、デザインには絶対的な正解が無いという性質上、最終的には１ピクセル単位の調整になっていく場合も多く、ややもするとズルズルと同じデザインをこねくりまわすコトになりかねません。

そんな時には「作っているのは”作品”ではない。”商品”を作っているのだ。」と考えてみて下さい。

この言葉、スーパーマリオの生みの親である、任天堂の宮本茂氏が仰ったものだそうですが、デザインもゲームもアーティスティックな一面が介在するものなので、制作者側の自己主張が入り込みやすいんでしょうね。

突き詰める作業は必要ですが、それは商品としてのクオリティを高めるものであるべきで、芸術性を追い求めるようになってはいけない、というコトですね。

また、新人さんの一番の仕事は「見聞きして、仕事を覚えること」なので、ちょっとでも不安なトコがあったら、タイミング見計らってどんどん質問していった方が、成績的にも人間関係的にも良い結果を招きます。

とにかく、作るものが”商品”である以上、仕様と違ったり納期内に完成できなかったりっちゅーのは許されません。クリエイティブ魂に火が付きすぎてしまったら、一歩引くことも大事。

何でも強火じゃ焦げちゃうよ！焦げた料理は美しくても食べられないよ！ってコトですね。

参考サイト：

• 報・連・相の重要性 - 新入社員の為のビジネスマナー講座
• 早くハンコを押してくれ！超多忙上司への報連相テク／Ｔｅｃｈ総研
• 社内マナー　社会人基本マナー　ビジネスマナー - ｉタウンページ

5.「IE6はバケモノ」という事実

ついにIE6のシェアが6％台になったという情報もありますが、実際にはまだまだ無視できない”悪魔の子”Internet Explorer 6。

ほとほと極端な独自路線の影響で、特にCSSの解釈においては、まずフツーの書き方ではまっとうに動いてくれませんので、マークアップ業務まで担当するような場合は注意が必要です。

というか、もはや絶対と言っていいほど、バグには遭遇します。心してください。

バグの表出する条件や対処法は、先人の方々がたくさんの血と涙情報を残してくれていますので、事前に勉強しておくなり、実際にバグに出くわした際の参考元としてブックマークしておくなりして、心の準備をしとくといいよ！泣いちゃダメだよ！

参考サイト：

• IE6のバグのまとめ - Webtech Walker
• ITキヲスク | IE6の頻出CSSバグいろいろと、それに対処するハック術
• IEの様々なバグの真相らしきもの - CSS HappyLife
• Explorer Exposed!

6.「全てのデザインには意味が必要である」ということ

最後は僭越ながら、デザイナーとしての心得みたいなのを。

例えば「抑止力」というものを与えたい場合、淡い水色の「□」と、原色に近い赤の「×」、どちらが目的に近い結果を期待できるでしょうか。

色が与える印象、形が与える印象、余白が与える印象、フォントが与える印象、テクスチャが与える印象。

段組みの取り方、コンテンツの配置、コンテンツの重要度、ユーザーの視線の流れ。

それら全てを包括的に俯瞰し、クライアントが求めるゴールに対して適切な対処が施されているか。

見た目だけの華美ではなく、デザインというアプローチからの明確なメッセージが、そのデザインに植え付けられているか。

目的に対して、何故その色を使うのか、何故その形にするのか、何故その余白があるのか。

理論もテクニックも知識も経験も、全てはこの為に。

参考サイト：

• 意味論的転回―デザインの新しい基礎理論／クラウス・クリッペンドルフ：DESIGN IT! w/LOVE
• その角丸に意味はあるの？ - EC studio デザインブログ
• BLOG「芦田の毎日」: 校長の仕事（２１）― デザインとは何か（意味を見る）
• デザインの要素と原則 | Webクリエイターボックス
• グッドデザイン: ディーター・ラムスの10の掟
• 優れたデザインの４大原則 | 仕事術 | 情報大海の羅針盤 | あすなろBLOG
• 私的WEBデザイン論