なりたてWEBデザイナーのオレイズム

なりたてウェブデザイナーのぼやきとWEBの仕事と妄想

カテゴリ: LPN13流WEBデザイナーのなり方

最近仕事が忙しいのか忙しくないのかよく分からない状態なLPN13ですが、皆さんいかがお過ごしでしょうか?

思い起こせば私もWEBデザイナーとして1年無事に過ごせました。
一応、手に職もついたわけです。

しかしながら、最近やる気が出てこないんですよねぇ。
よく中学や高校で「2年生は気持ちがだれる」みたいな事を言われますけど、なんだかそんな感覚に似ています。

何となくダラダラと毎日を過ごしているような気がして…。
そのくせ、自分の年を考えるといろんな心配事も。

なんとか気分を一転させないといけないなぁ。

久々にまともな投稿になりますが、皆さんいかがお過ごしでしょうか?

気がつけばもう師走で、時の経つのが恐ろしく早いことを実感しています。

数日前にkeiさんのblogでスライスの切り方や現場での製作の仕方に関する記事があったので、私もそれに乗っかります。

私の会社の場合、基本的にIllustratorでデザインを作ります。これには理由があって、私の会社は印刷物のデザインもやっているのでデータを使いまわせるからです。
例えば、前に自動車教習所のサイトを作ったのですが、その後、パンフレットも作ることになり、サイトに使ったデザインをパンフレットにも使いまわしたりということがありました。
逆に、パンフレットで使ったデザインをサイトに使ったりもします。
そんなわけでIllustratorだとデータの再利用が可能なわけなんです。
しかしながら、Illustratorでデザインをすると、その後にPhotoshopに書き出してスライスをしてという風になるんでファイルが増えるしめんどいです。

なので、私はFireworks大好きっ子ですから印刷物に使いまわさない事が前提のものにはFireworksを使います。

実際のところ、Fireworksならひとつのアプリケーションでデザインからスライスまで出来るんで楽チンなんですが、画像とかいっぱい読み込むと動きが著しく重くなります(泣)

あと、私は完全に独学でWEBサイトの製作の仕方を覚えたので人と違ったやり方をしてるんじゃないかとたまに気になるときがあります。
スライスの切り方なんかがまさにそれです。
スライス<私はスライスを切るときに、極力無駄な部分を作らないように切ります。例えばこんな感じです(デザインの良し悪しには触れないでください。なにせ就職する前のものですから…)。余白はCSSのmarginやpaddingで全部設定します。
なぜこうするかというと、画像は少しでも軽い方がいいとどこかで見たからです。いまどきブロードバンドが当たり前のご時世ですが、少しでもページが読み込まれるのが早いに越した事ないですもんね。世の中サイトの作り方にもいろんな流れがありますんで、どこの会社に行っても通用するような標準的な作り方が出来るようにしたいものです。

そうそう、この前初めてクライアントからCSSでページを作ってくれと頼まれました。
やっとかよ…という感じですが、我が町もそろそろCSSが普及してきそうな感じです。
そして、私はやっと会社で堂々とCSSを触れる日が来るのでした。

WEBデザイナー必読の「Web designing」定期購読はコチラから
同じくWEBデザイナー必読の「Web Creators」の定期購読はコチラから
あなたも半年でWEBデザイナーになれるかも!!
今までに買ったWEB関連の本をまとめました。皆さんの参考になれば幸いです。
→LPN13が実際に買ったWEB関連の本



ウェブデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

前回はレイアウトについてちょこっと話をしましたが、今度はWEBデザインならではの話をしたいと思います。

私の会社ではWEBは印刷物の延長上と認識している方がいるのですが、私はまったく切り離して考えた方がいいと思います。

印刷物は目で見るものであり、マウスを使ってクリックしたり、アニメーションを使ったり、キーボードで数値を入力したり、モニターを通して見たりはしません。基本的なデザインという面では共通する事も結構ありますが、見た目の綺麗さはある程度(線引きは難しいですが)あれば、今のところWEBではそれ以上必要ない様に思います。
それよりも使いやすさに重きを置いたほうがいいのではないでしょうか?

日本で一番多くの人が見るサイトはYahooらしいですけども、これを基準に考えると分かりやすいと思います。
Yahooのトップページではテキストリンクはすべて下線が付いています。それに加え、文字の色は青色がほとんどです。
また、その他のポータルサイトでもテキストリンクには下線が付いてあり、色が青色である事がほとんどです。
こういったサイトを見ている人たちは「テキストリンク=下線付きの青色文字」と認識します。
CSSでリンクの下線や色を変えることは出来ますが、出来る限り「下線付きの青色文字」を使用した方がいいと思います。ただ、場合によっては(デザインの都合上)色を変えるぐらいは大丈夫だと思いますけど。

それから、デザイン上、矢印を使う事が結構あると思います。ブラウザ(IEやFirefox)にも矢印のマークが付いています。また、電化製品のリモコンにも矢印が使われている事が良くあります。エレベーターのボタンもそうですね。
これらに共通する事は矢印を使っているところは「押せる」という事です。
ネット以外の普通の生活で「矢印は押せる」という認識をユーザーは持っています。
となると、WEBデザインをする上で矢印を使うという事はユーザーに「これはボタンですよ」とアピールしていることになります。

でも、矢印を使っているのに押せない時がたまにあるんですよね。こうなるとユーザーは「矢印のくせに押せない=使い勝手が悪い」というイメージを持つ事もありますので要注意です。
また、「トップページに戻る」というボタンを作る場合などは左向きの矢印にするなど、矢印の向きにも気をつけた方がいいと思います。理由はほとんどのブラウザの「戻る」ボタンが左の方を向いているからです。ユーザーはそれを認識していますので、本能的に「戻る」は左方向の矢印だと思います。逆に「進む」場合は右向きが良いでしょう。

また、WEBサイトを作る場合は複数のページを作ると思いますが、ページごとにまったくデザインの違うページを作ってしまうと、これまたユーザーを迷わす事になりかねません。印刷物であればページを綴じたりすることでそういう心配はありませんが、WEBサイトはリンクを押すだけでいろんなページやサイトへ飛べるという機能がありますので「あれ?違うサイトに飛んじゃったかな?」とユーザーを迷わす危険があります。
そう思わせないためにはヘッダ・フッタ・ナビゲーション・その他のボタンは共通にするのがベーシックです。

他にも色々とありますが、こういうことを考えながら作ると、ユーザーが迷わずに目的の情報までたどり着けるサイトが作りやすくなると思います。

今までに買ったWEB関連の本をまとめました。皆さんの参考になれば幸いです。
→LPN13が実際に買ったWEB関連の本

ウェブデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

前回はWEBサイト製作に必要なアプリケーションや仕事の流れを紹介しましたが、今回はもう少し踏みこんで書いてみたいと思います。

まず、WEBデザイナーというだけあってデザインが出来ないといけません。
ここからは私独自の考えですので、一般的なものとは違うかもしれませんが、その辺はご理解ください。

WEBサイトを作る前に詳細なデザインを作る必要があります。
これを作ることにより、自分の作るサイトがどういうものになるのかしっかりとイメージできます。また、クライアントにもそのイメージが形として伝わりますのできっちりと作らなくてはなりません。

WEBデザイナーではなく、個人の趣味でホームページを作っている方はあまりそういうことを行わないことが多いと思います。(私もWEBデザイナーを目指すまではそうでした)だいたいはホームページビルダーなどを開きながら、「ここにロゴをおいてと、じゃあこのへんに新着情報をつけようかな」とデザインとコーディングが同時進行になる事が多いと思います。デザインとコーディングを同時に進行する事で効率的に作業が出来るように思いますが、その逆になる事も多いです。プロを目指す方は同時進行はやめておきましょう。

まずは大まかなレイアウトを決めます。
この段階でページに入れるものをそろえておくと、あとあとらくちんです。
レイアウトを決めるときは大きめの紙(A4ぐらいの紙で充分です)にスケッチするとやりやすいように思います。ヘッダ・フッタ・ナビゲーション・ロゴ・イメージなどのレイアウトをさらさらっと紙に書きます。
うまくレイアウトが決まったら次はIllustlatorやPhotoshop、Fireworksでの作業に移ります。

Illustratorなどの作業に移ると、最初紙に書いていたレイアウトと多少違ってくる事もあるかと思いますが、それは良しとしましょう(笑)

とりあえず、こんなかんじで。
次ももうちょっとデザインのお話をしてみます。
また、質問などありましたらお気軽にどうぞ〜。(未熟者ゆえ、ご期待に沿える内容の返答ができるかどうかはわかりませんが)

今までに買ったWEB関連の本をまとめました。皆さんの参考になれば幸いです。
→LPN13が実際に買ったWEB関連の本

WEBデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

前回は心意気について、あーでもない、こーでもないと書きましたが、今回は技術編です。

まず、製作で使用するアプリケーション。

●デザイン
Illustrator
Photoshop
Fireworks

●コーディング
Dreamweaver
Golive

●アニメーション
Flash

とりあえず基本的にはこれらのアプリケーションを使います。
会社や人によって使うアプリはさまざまですが、Illustrator・Photoshop・Dreamweaver・Flashが一通り使えれば何とかなると思います。

個人的にはFireworksがWEBデザインをするには使いやすいと感じたのですが、私の会社は印刷物がメインなので、データを使い回しする際にIllustratorでデータを作った方がいいとの事からIllustratorがメインになってきています。
業界内でもIllustrator&Photoshopでデザインするという人が多いように思います。

コーディングはメモ帳などのテキストエディタでもできるのですが、DreamweaverやGoliveを使った方が効率的です。ライブラリやテンプレート機能はとても便利で一度使うと病みつきです。また、一般的にDreamweaverを使っている人の方が多いのでDreamweaverを使えるようになるのが一番だと思います。

FLASHはインタラクティブなサイトには欠かせないものです。ただ、ActionScriptというプログラムを使えるのと使えないのとで大きな差が出ます。ちょっとしたアニメーションムービーを作れるだけで「Flash使えます!」という人もいますが、恥ずかしい思いをするので、そういうことはあまり言わない方がいいです。(私の体験談です)


次は、WEBサイトを作るおおまかな流れです。

1.ラフデザインの作成
2.詳細なデザインの作成
3.コーディング
4.完成

私の会社では提案書や企画書と共にTOPページのラフデザインを作ります。
ラフはあくまでも「こんなイメージでどうですか?」ということを伝えるためのものなので画像なんかはダミーを使います。
ラフデザインを出した後にクライアントからもっと違うイメージでといわれる事もあったり、前もって参考にしたいサイトを教えていただく場合もあります。
また、ラフデザインを作らずにいきなり詳細なデザインから入る事もあります。

写真素材や原稿などが揃うと詳細なデザインを作ります。
これはもうダミー画像などは使わず、完成予定のサイトと見た目まったく同じものを作ります。最終的にHTMLにするという前提でデザインをします。ボタンのロールオーバーやリンクの色などもわかるようにします。
私の場合、ここが一番時間のかかる仕事になります。
詳細なデザインが完成したらクライアントに確認してもらい、修正などを行います。

クライアントからOKがでればコーディングになります。
詳細なデザインを元にHTMLにしていきます。

コーディングが終了したらテストサーバーにアップし、クライアントに確認をしてもらい、修正などを行います。
前にこの段階でクライアントから「デザインを変更してもらいたい」といわれた事があり、半泣きになりながら作り直したことがあります。もうHTMLまで組みあがっていたので1からやり直しな羽目になりました……。
「コーディング作業に入るとデザインの変更は容易に行えないので別料金を頂きます」ということを事前にクライアントに伝えて欲しいと思いました(泣)このあたりはきっちりと決めておかないと泣く羽目になります。っていうか、うちの会社のやり方が下手なんだろうけど。コーディングを軽視しすぎなもので。

修正も終わったら本サーバーにアップし公開します。

これが大体の流れになります。

とりあえず、きょうはこれまで。
次回はもうちょっと突っ込んで書いてみたいと思います!

今までに買ったWEB関連の本をまとめました。皆さんの参考になれば幸いです。
→LPN13が実際に買ったWEB関連の本

WEBデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

スクールに通うのがオススメと前回書きましたが、金銭的な事情や、大人の事情でスクールに通えない方も多数いらっしゃると思います。
私も金銭的な余裕もなく、めでたく独学の道に進んだわけです。
2000年4月ごろの記事を読んでもらえればよくわかります。

独学でWEBデザイナーを目指そうとしている方で、今までにホームページ(WEBサイト)を作ったことがないと言う人は少ないと思います。
おそらくホームページビルダーやフロントページなどで趣味のサイトなどを作ったことがあると仮定して話を進めます。
もし自分でサイトを作ったことがないけどWEBデザイナーになりたいという人がいらっしゃいましたら、まずは何でもいいので自分のサイトを作ってください。話はそれからです。

今をさかのぼる事6年ほど前に私はホームページを趣味で作っていました。
別にデザインが好きなわけでもなく、本当に個人の趣味で作ったサイトでした。昔のサイト
すごい恥ずかしいですがスクリーンショットを載せます。
これを見ていただければわかるようにめちゃくちゃショボイです。
サイトに入るといきなりmidiが鳴り始めますしね。
本当に恥ずかしすぎます。
まだこのサイトはインターネット上のどこかに存在しますので(更新は5年ほどしていませんが)興味のある方もない方も探さないでください。絶対に!!

でも、こんなサイトしか作れなかった人間でも結構何とかなるんですよ!!

まず、独学を行う上で一番大事なことはなんといってもモチベーションを保つ事です。
スクールに通っていると、高いお金を払っているからという理由や、わざわざ家を出てスクールまで行くという行動や、スクールにいる他の受講者の刺激を受けて、などモチベーションを保ちやすい状況になります。

独学の場合それがないんですよね。
なので、どうにかして自分を追い込まなくてはなりません。
私は仕事を辞めて収入源を断つという追い込み方をしました。

「25歳無職(失業保険貰ってます)」
この肩書きだけでもかなり自分を追い込む事ができました。
ほんと、この時期は昔の友達とか知り合いに絶対に会いたくなかったですね。
「今何してるの?」って聞かれるのが一番怖い時期でした。

失業保険は3か月分しっかり貰いましたが、支払いを分を除くと小遣い程度です。
ただ、私は実家暮らしなので食べる事と寝る場所の心配はいりませんでした。
スタートこそ良いペースでしたが…元々自分に甘いタイプの人間ですので、ちょうどやりたかったオンラインゲームを夜中遅くまでやってしまったり、金もたいして持ってないのに仲の良い友達と飲みに行ったりといろんな誘惑に負けていました。

しかし、それではだめだと思い、自分を追い込むためにWEBデザインに関する本を買いあさりました。本を買って損することはありませんし、少ない失業保険のお金を使う事によって、「これだけ金をかけたんだから元を取り返せ!」という気持ちを持つ事もできました。

独学で勉強する人はとにかく、まず自分を追い込んでください。
私のように今の仕事を辞めて追い込むのもよし。仕事を辞められない人は本でもアプリケーションでもいいから、WEBデザインに役立つと思うものを自分が払えるギリギリの範囲でたくさん買ってください。

昔、大原学園のCMで
「君にふさわしい男になる!」
「僕は税理士になる!」
「じゃあ私はウェブデザイナーになるわ!」
「なら僕は警察官だ!」
というのがありましたけど、それと同じように周りの人に「じゃあ、私はウェブデザイナーになるわ」と宣言するのもひとつの手です。
人に宣言する事によって自分を追い込む事ができます。

「WEBデザイナーになりたいなぁ」じゃなくて、「WEBデザイナーになれないとマジでやばい!」という気持ちがすごく大切です。

あと、毎晩布団の中で、WEBデザイナーになれないまま、年を取るまで自分がやりたくもない仕事を続けてる姿を想像してください。結構効果的です。たまに涙が出そうになるのはご愛嬌♪ それに加え、仕事をバリバリやって幸せな生活を送っている人を思い浮かべてください。
もう自分が情けなくなってきます。「マジでどうにかしないと!!」という気持ちがどんどん強くなるはずです。この気持ちがとても大事だと私は思います。

最後に、一番最初に買ったWEBデザインの本を紹介します。「ゼロからはじめるWEBデザイン」という本です。

この本を読んでWEBデザインの基本中の基本がどんなものかという事が理解できました。
写真も多くて読みやすく、今からWEBデザイナーを目指そうと思う方にはかなりオススメです。

今までに買ったWEB関連の本をまとめました。皆さんの参考になれば幸いです。
→LPN13が実際に買ったWEB関連の本

WEBデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

WEBデザイナーになりたいと決めたら、とにかく勉強しなくてはなりません。
WEBデザインなんて言葉自体できて間もないので勉強の仕方はさまざまだと思います。
また、「デザイナー(サイトのデザイン)」「コーダー(HTMLコーディング)」「フラッシャー(FLASHを作る人)」などをWEBデザイナーとひとくくりに言うことも良くあります。
私のように田舎の小さな会社でWEBの仕事をしていると、上に書いた3つのことは大体1人でこなさなければなりません。
また、写真の撮影や、企画書・見積書の作成、クライアントとの打ち合わせなんかもする場合もあります。

ここでおすすめなのはWEB系のスクールに通う事です。
世の中にWEB系のスクールは履いて捨てるほどありますが、だいたい講座の期間は3ヶ月から6ヶ月ほどです。その期間のうちにWEBサイトを製作する技術の基本中の基本はマスターできるはずです。
しかも、スクールに通うとWEBサイト製作に使うアプリケーションも安く購入できます!!
(エデュケーション版やらアカデミックパッケージやら)
ただ、アプリケーションを安く買えても講座代がどこのスクールも結構高いのがネックです。

デジハリ
ヒューマンアカデミー
インターネットアカデミー

適当にWEBの講座のあるスクールを挙げてみましたが、やはりどこも同じような額ですね。
こうやって高い額を自分で払って勉強すると「絶対に元を取り返してやる!!」という強い気持ちが生まれることがあります。こういう気持ちが出たら後は元を取り返すためにひたすら勉強できるんじゃないでしょうか? 親にお金を払ってもらう人はモチベーションが下がる事があるので要注意です。

それとスクール選ぶ際に、個人的に注目して欲しいのは「受講生の作品」です。
こういうスクールのサイトには受講生が作ったサイトが掲載されている事があります。だいたいそのサイトは講座終了間際に製作しますのでスクールのレベルもおのずとわかってきちゃいます。

そういうわけで、スクールに通われる方は失敗しないスクール選びを心がけてくださいね。
ただ、どんなスクールに通っても要は本人のやる気しだいなので、何とかできない人はなんともならないし、何とかできる人は何とかなると思います(笑)

次回はスクールに通うお金もない貧乏人(私みたいな人)必読の「独学ってどうすりゃいいの? 誰が俺を救ってくれるの?」です!!
乞うご期待!!(あんまり期待されてないですけど)

WEBデザイナーになりたいという方が多いのか少ないのかはわかりませんが、もしそういう方がこのブログを見て少しでも参考になればと思って俺流(オレイズム)のWEBデザイナーになる方法をちょこっと書いてみようかと思います。

まず第一に、「インターネットが好き」という事が一番大事だと思います。
ふと思ったのですが、デザインが好きだからWEBデザイナーになるって言う人は結構少ないのではないでしょうか?
純粋にデザインの好きな方はおそらく、まず「グラフィックデザイナー」の道を歩まれるのではないかと思います。

インターネットが好きということは、意識せずともいろんなWEBサイトを見ていると思います。結果、自然に目が肥えることになります。
と、言いたいところなのですが、個人のサイトばかりを見ていてはまったく目は肥えません。
WEBデザイナーの仕事は企業のサイトをデザインするのでWEBの知識のない個人の作ったサイトを見ていると悪い癖がついてしまいます。
実際、私も昔個人のサイトばかり見ていて、それを参考に自分のサイトを作ったのですが、今思うと見づらくてしょうがないページでした。

幸いな事にかっこいいサイトを集めているリンク集サイトがあります。(私も誰かに教えていただいたのですが)
ikesai.com
また、mixiの「WEBデザインコレクション」コミュニティーもかなり参考になります。
このサイトなどを参考にしてすばらしい目を手に入れてください!

※なぜだか私の会社の上司(40代の元グラフィックデザイナー)はikesai.comに掲載されているサイトのデザインはまったく良くないと言います。ただ、私はそんな事を言う上司の方がちょっとおかしいのではないかと思っています。

↑このページのトップヘ