News


Proideスタッフの村上です。
新年あけましておめでとうございます。2015年もよろしくお願いします。
今年も気合を入れていきまっせ!!

今日から3回に分けて、Proideで働くことについてこのブログに書いていきます。
現在、各事業所で訓練をしている訓練生や、その訓練生を支援している職員の皆様に向けて、私、村上がA型職員目線でProideについていろいろなことを書いていきます。

「Proideっていったい何をしているところなの?」
とか
「ホームページやチラシなどのデザインができるようになりたい!!」
とか
「自分の実力をProideで試したい!!」

などなど。皆様Proideに関していろいろな思いをお持ちかもしれませんが、3回の連載を通じてITセンターの中でも、特に少数精鋭部隊のProideについて紹介します。

まずは、

【Proideで働く その1】Proideの紹介

について今日は書きます。
残りの2回は、

【Proideで働く その2】 独学で極める!Web制作の勉強術
【Proideで働く その3】 Proideで体感!Web制作の最前線

となっております。
普段はクールな私ですが、たまには本気を出して書いていきますので、皆様しっかりついてきてください。

それでは早速はじめます。

ホームページ制作の役割分担

皆様ご存知のように、Proideはホームページや印刷物の制作を行っている部門です。この連載では主にホームページ制作について紹介していきます。

ホームページ制作と一言で言っても様々な工程があります。まずはその工程の中でもメインとなる「デザイン」と「コーディング」についてお話します。

Proideで1つのホームページを制作する際、まずはホームページの見た目をPhotoshopやFireworksといったソフトでデザインし、そのデザインを元にしてHTMLやCSSでコーディングするというのが大きな流れとなっております。

Proideではデザインを主に行っている「デザイナー」と、コーディングを主に行っている「コーダー」という風に作業を分担してホームページを制作しています。これは別に分けようと思って分けたわけではありません。それぞれのスタッフの好きな事や得意な事を分担した結果、そういう風になりました。Proideに限らず、一般的なWeb制作会社においても、デザインとコーディングに作業を分担して制作を進めるというのが主流となっております。

それじゃ、コーダーはコーディングだけ、デザイナーはデザインだけやってればいい、と考えられるかもしれませんが、デザインにしろコーディングにしろ、ホームページを制作にするにあたり、最低限知っていて欲しいという、スキルの基礎的な土台というべきものがあります。

デザイナー志望の方の必要スキル

ここで下の図をごらんください。

img_designer01

これはデザイナー志望の方のスキルを「コーディング」と「デザイン」に分けたものです。デザイナーはPhotoshopやIllustratorのデザインスキルが高くなっています。しかしデザインスキルに比べると低いのですが、若干のコーディングスキルも必要です。

コ-ダー志望の方の必要スキル

次にコーダー志望の方の必要スキルを見てみましょう。

img_coder01

コーダー志望の方はHTML/CSSのコーディングスキルが高くなっていますが、PhotoshopやIllustratorのスキルも若干必要です。

このようにデザインとコーディングという風に分担してますが、それぞれお互いに必要最低限知ってて欲しい共通認識のようなものがあります。デザイナーになるにしろ、コーダーになるにしろ、まずはデザインとコーディングともに最低限知ってて欲しい部分のスキルを身につける必要があります。

それでは、それぞれどういったスキルが最低限必要となるのか、私の意見を述べてみましょう。

デザインとコーディングに必要な共通スキル

まずデザイナー志望の方にとって最低限必要なスキルとしては、基本的なHTMLの構造を知っておくということをあげておきます。ホームページは最終的にはHTMLの文法に従って見た目が決定されるため、デザインの段階である程度HTMLを意識したデザインにしておかないと、HTMLを書く段階でコーダーが大変な目にあいます。

そもそもHTMLとは・・・などと語りだすときりがないのでやめときますが、手っ取り早く身に着けたいという方は、

Webクリエイター能力認定試験

という資格があるので、それの取得を目安にすると良いかと思います。

次にコーダー志望の方にとって必要最低限なデザインスキルとして、PhotoshopやFireworksで作成されたデザインのスライスする作業を挙げます。「スライス」って何?って思う方、いらっしゃいますよね。PhotoshopやFireworksで作られたホームページのデザインというものは、例えるならば、1枚の平べったい写真のような物となっています。その1枚の写真の中から、「ここはロゴの部分」「ここはナビゲーションの部分」「ここは写真画像の部分」など、それぞれ別の要素としてトリミングするような作業のことを「スライス」といいます。

私は主にコーディングを担当しているコーダーなのですが、PhotoshopやFireworksで作られた画像のスライス作業は必須です!! ですが、そんなに難しい作業では無いので、ちょっとやってみたり、教えてもらったりしたらすぐにできると思います。

また、Proideとして実際に受注している案件として、

「デザインはこっちでやるから、Proideさんにはコーディングだけしてほしい!!」

みたいなお仕事もあったりします。
こういった案件はただ単純にスライスしてコーディングだけやってお終い、にするのはもったいないので、よその会社がどういうデザインをどういう風に作っているのかという勉強になります。そうして私が過去に仕事として実装したコーディングの仕事を、新しく来た実習生のコーディングの練習素材として活用しています。仕事のネタっていろんなところにあるんですよ。

ところで、ここまで「デザイン」と「コーディング」について書いてきましたが、実はホームページ制作って他にも重要な仕事があるんですよ。それは「集客」と「サーバーサイド」です。

集客の話

「集客」とは似たような意味にWebマーケティングとか、最近有名になってきた「グロースハック」などが挙げられます。そもそもホームページを作る目的というのは、ホームページを作ること自体ではなくて、作ったホームページを見たお客さんに商品を買ってほしいとか、お問い合わせをして欲しいとか、そういったことですよね。

その目的を達成するためには、
「ホームページに来てもらう人の数を増やす」

「ホームページに来た人に何らかの行動をさせる」
という2つのポイントがあります。このポイントをしっかり押さえたホームページを作ることが重要です。
よく「キレイなだけのホームページではダメ!」っていうのは、こういった集客を無視したホームページの事を言っています。

ProideはP2にできてから1年と半年以上過ぎましたけど、集客に関してはまだまだウィークポイントだったりします。スタッフみんなでいろいろな情報を集めたり各人で意見を出し合って様々な工夫や実験をしたりしています。そんなわけで、集客やマーケティングに興味のあるスタッフも大募集中です。

サーバーサイドの話

さて、もう1つのポイント「サーバーサイド」です。最近の言い方だと「バックエンド」などとも呼ばれています。

ホームページのデータって皆さんの目の前にあるパソコンにもともと有ったわけではなくて、インターネット上のサーバーと呼ばれているコンピューターにあるホームページのデータをダウンロードして表示させているんですよ。

図にするとこんな感じです。

img_cs01

ざっくり言うと、インターネット上のホームページを保存しているコンピューターをサーバー。目の前のパソコンやスマホをクライアントと呼び、これらの事をクライアント/サーバーシステムと言います。

サーバー上で動作させるシステムをここでは「サーバーサイド」と呼んでいますが、その中にはホームページのデータを公開するのに必要なApacheというソフトウェアやデータベースソフトのMySQL。またそれらを操作させるプログラミング言語PHPなどがあります。

ぷろぼの職員の方なら使ったことのある「Port」はPHPで開発されたシステムです。また、このブログを動作させている「WordPress」もPHPで開発されています。

前半で述べたコーディングの話に戻りますが、HTMLやCSSといった記述は主にクライアントサイドの技術に分類されています。だからメモ帳とかでHTMLを書いて、拡張子を「.html」とかにしてダブルクリックするだけで、ブラウザがちゃんとHTMLを解釈して表示してくれます。ところがサーバーサイドの技術は専用のソフトウェアや知識が必要となります。そういうわけで少し敷居が高い印象がありますね。物によっては環境構築するだけでも、つまずくケースなどもあったりします。

Proideはサーバーサイドのシステム開発もまだ発展途上です。そんなわけでシステム開発に興味のある職員も募集中です。

まとめ

ここまでで、Proideの紹介と言いつつホームページ制作の基礎的な流れの解説となってしまいましたが、いかがだったでしょうか。この記事はあくまでも初心者向けに書いた内容なので、言葉の使い方が厳密な意味とはちょっと違うなと、詳しい人にはばれてしまいそうですがご了承ください。

次は、

【Proideで働く その2】 独学で極める!Web制作の勉強術

です。インターネットを活用して効率よく勉強する方法や、私が実践している情報収集のやり方などを紹介する記事です。お楽しみに!!

★Proideで働くシリーズ
【Proideで働く その1】Proideの紹介
【Proideで働く その2】 独学で極める!Web制作の勉強術
【Proideで働く その3】 Proideで体感!Web制作の最前線

このエントリーをはてなブックマークに追加