デザインをもっと楽しく!WEBデザイナーの皆様にとって役に立つ情報をお届けいたします! おしゃれなボタンの作り方やテクスチャの使い方、制作関連のおすすめサイトなどの情報が満載! | フォトショッパーフォトショッパー

27歳で未経験からデザイナーになった私が、どうすればWebデザイナーになれるのか考えてみました


未経験からデザイナーになりたい

みなさんこんにちは!Webデザイナーのおぎしおと申します。
今日は「将来ウェブデザイナーになりたい!」という方にむけて、デザイナーになるためにどうすればいいのか、過去の経験も交えつつご紹介していきたいと思います。

私がデザイナーになったきっかけ

私がデザイナーになったのは、Web運用や進行管理をしていたとき「Webデザイナーに意見や意図を的確に伝えられるようになりたかったから」です。このころはデザイナーさんにうまく意見を伝えられず、常々「こりゃいかんな」と感じ、一念発起してWebデザインの勉強を始め、気がついたらそれが本職となっていた訳です(笑)。

最初は「コーディングやデザインの基本がわかれば、デザイナーさんに上手に意思伝達ができるはずだ!」と思っていたのですが、ひょんなことからWebデザイナーとして採用され現在に至ります。

デザイナーとして働き始めたのは27歳のころ。後程お伝えしますが、今はデザイナーとして様々な働き方ができる時代です。これからもっともっとその流れは加速していくと思います。努力と熱意があれば「始めるのが遅い!」なんてことはないと思います!

デザイナーは誰でもなれる!?あなただけの強みを持とう

そんな私ですが、もともとデザイナーを目指していたわけではないので「絵がうまい!」とか「センスが尖っている!」とか、そういう特別な能力は持ち合わせていません(笑)。

得意分野を見つけていくのが大事周りで活躍するデザイナーさんを見ていると、「絵やイラストが上手」という人もいれば「UI(ユーザインタフェース)設計のプロ」みたいな人もいます。
「シンプルなデザインが得意」「チラシのような雑多な情報をまとめるのが得意」「ロゴ作りのプロ」「デザインとコーディングどちらもバランスよくこなせる」みたいな人もいます。

デザイナーには個性があって、全員が同じ得意分野を持っているわけではないんです!つまり、それぞれの強みを持てば、お互いに補完し合える間柄になれるというわけなのです。
自分の個性や特性に合わせて得意分野を見つけていくのが大事なんじゃないかなと思います。

どうやって勉強すればいいの?

「実際にデザイナーになるにはどうしたらいいの?」そんな皆様のために、Webデザイナーになるために必要な情報をまとめてみました。

1,デザイナーになる準備を整えよう! ~まずはココから!周辺環境を整えよう~

まずはデザイナーになるための準備を整えましょう。

PCを用意する

基本の基本にはなってしまいますが、まずはPCを用意しましょう!デザイン系のソフトは処理が重いので、できる限りさくさく作業できるようなスペックのPCが欲しいものです。

「MacとWindowsどっちがいいのか」という点ですが、使いやすいOSのものでいいんじゃないかなぁと思います。今までの会社では「基本的にWindowsだけど……、Mac使いならMac用意するよ?」という会社が多かった気がします。
(ちなみに我が家では旦那用のMacBookProと私用のWindowsの二台がフル稼働しています)。

テキストエディターを用意する

次に、コーディングに必要なテキストエディタを用意しましょう。windows環境であれば
TeraPad
サクラエディタ
秀丸(シェアウェア)
手始めにインストールするならこの辺りから初めて、徐々に慣れてきたら拡張機能の充実したエディタに鞍替えするのがいいんじゃなかなぁと個人的に思います!特に企業でデザイナーとして働くとダウンロードできるエディタが限られている場合もあるので、コーディングだけならこのあたりのものでよいのではないかなと思っております。

AdobeのCreative Cloudを購入・インストールする

デザイナーになりたい!と考えるなら、少なくともAdobe Creative Cloud‎のPhotoshopとIllustratorの入手は必須になるかなぁ、と思います。
(Dreamweaverというコーディング用のソフトもあります。これはコードを打ち込むとプレビュー画面に画像が表示されたり、コードが自動挿入されるものです。
ですがコードがわからなくなれば検索をすればいい!プレビューはブラウザですればいい!タグ抜けはHTMLの構文チェックツールでチェックすればいい!……と個人的には思っているので、テキストエディタがあれば充分だと思っております)

各パッケージの「ツールの使い方」については、一冊本を買って、覚えましょう!

◆おすすめの書籍

AdobeのCreative Cloudは月額利用料金が発生するものです。30日間の無償体験版がインストールできるようなので「まずは1ヶ月!」という感じでためしにダウンロードしてみると良いと思います。
Photoshopだけのインストールだと月額料金が980円(※2015年6月現在)なので「予算がない!」という方は少なくともPhotoshopだけでも入手しておいた方がいいかなぁと思います(^^;)。
昔はソフトを買って導入するのに数十万かかっていたPhotoshopですが、今は月額料金になっているので、気軽に始められるのでとってもおすすめです。

2,勉強を始めよう! ~デザインとコーディングを覚えるのに必要なこと~

「デザイナーになりたい!だけど勉強方法がわからない!」そんな方のために勉強方法を掲載しておきます。

デザインの勉強

先ほどご紹介したおすすめ書籍などで各ソフトの「ツールの使い方」をマスターしたら「Photoshop チュートリアル」などの文言でWeb検索してみてください。
デザインの作り方を丁寧にレクチャーしてくれているサイトがHITすると思います(英語で書かれたサイトがけっこう多いのですが…)
ちなみに、このサイトでも「ボタンの作り方」や「テクスチャを使ってみよう!」などのカテゴリーでチュートリアルを掲載しているので、まずは手始めにそのあたりから始めてみるのもいいかもしれません!

コーディングの勉強

コーディングの勉強をしたい!という方。ドットインストールさんのサイトを使ってみてください!コーディングの基礎から応用まで、本当に丁寧に解説されています。
無料版で使うのも良いですが、時間を短縮したいという方はプレミアムサービスに加入するのもよいかもしれません。プレミアムレッスン動画や、ソースコードの閲覧などができるみたいです。
まずはこのようなサイトを見ながら、コードをたくさん書くことが上達への近道です。

「動画を見る時間がない!」という方は、まずは「HTMLではどんなことができるか?cssではどんなことができるのか?」をwebで検索してみましょう!Webである程度の基礎知識を身につけたら本を一冊買って、コードをひたすら模写していくとよいと思います。

◆おすすめの書籍

ある程度基礎の技術が身についたらオリジナル作品をコーディングしていきましょう。
各種ブラウザで内容をチェック→崩れが発生したらwebで原因を検索して修正・・・と繰り返すうちに自然と技術向上していきます。
(チェック方法など、コーディングに役立つ記事もこれから書いていこうとおもっております)

3,実績を作ろう ~これであなたも立派なWebデザイナー!~

最後に実績作りについてです。

クラウドソーシングで腕試し

ある程度技術が身についてきたら、まずはクラウドソーシングなどで腕試しに技術チェックをすると良いと思います!
例えばクラウドソーシングで有名なランサーズというサイトでは、デザインコンペなども行っています。
まずはそちらでデザインを提出してみると良いと思います。「同じテーマに対して他のデザイナーさんがどんな作品を作ってくるのか?」ということもチェックできるので非常に勉強になります。

企業デザイナーとして働く

他にはアルバイトで制作会社に滑り込んだり、初心者歓迎の会社に応募してみたりする方法もあります。
今まで勉強しながら作った作品はポートフォリオとしてまとめておくと、面接のときにさっと提出できて良いですよ。

まとめ

いかがでしたでしょうか?デザインにセンスやスキルもほぼない状態でデザイナーになったので、今までの経験に基づき記事を書いたら「なにか参考になることもあるかな?」と思い、まとめてみました。
デザイナーの仕事というのはイメージよりも華やかではないことも多いし、相手の意向がうまく汲めない・表現できない時に苦しさを感じることもあります。それでも「好きだからこそ頑張れる・楽しめる」という側面があることも確かです。挑戦しなければそれが自分に合っているのかそうでないのかもわかりません。まずは踏み出すことが大事ではないかなぁ、と思っています。
ぜひご自身に合った方法で『Webデザイナーとしての第一歩』を踏み出してみてくださいね!


Comment

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

新着