紙のデザイナーがウェブ開発できるようになるまでに必要なこと
絶対に成功する方法なんてないですが、デザイナーが挫折せずにウェブアプリケーションをつくるためには、いくつかポイントがあると思うのでまとめようと思います。
グラフィックデザイナー出身の自分自身、プログラミングの本を買っては本棚に積み、何回も挫折しています。
その時の経験を踏まえ、デザイナーがプログラマーの域に足をつっこむための近道を考えてみました。
ここでいうウェブ開発は、ウェブサービス開発であり、Wordpressでブログをつくることではありません。自分のオリジナルのアプリケーションをつくることを言っています。また、実際にどうやってアプリを作るかという技術的な話でもありません。
photo by pakutaso.com
こんな人が対象かもね
- グラフィックを主に生業としているけどウェブもつくりたい。
- 企業ランディングページ以外もつくりたい。
- ウェブやらないとやばいんじゃないの？と感じてる。
- プログラミングに何回もトライしてるけど挫折する。
デザイナーの特権として、見た目はめちゃくちゃそれっぽいのが作れるというのがあります。
ランディングページとかは特に。その技術はリリースの時に結構大事だったりする。
そういえば、
個人的に日本企業ランディングページと呼んでるものがあります。偏見入ってますが。
なんか上手く言い当てるワードないですかね。
こういうの。
http://dokodemonaisen.com/campaign/
これだとあんまりウェブのデザインとは言わないと思います。
ウェブデザイナーのランディングページはこんな感じかな。
https://incident57.com/codekit/
これは、デザイナー+フロントエンドエンジニアで作ってるか、
できるデザイナーなら一人でやっちゃうかも。今どきあんまり境目はないもんね。
脱線しました。続けます。
モチベーション
この記事はデザイナーがどうやってモチベーションをキープするかということにフォーカスします。
ウェブアプリケーションなんて根気があれば誰だってできるんですが、その根気が続かない。
特にビジュアルやコンセプトを仕事の中心にしているデザイナーにとって、プログラミング習得は苦行以外のなにものでもない…。
プログラマーがデザインに苦手意識があるように、デザイナーにもそれに相当する苦手意識がプログラミングに対してあります。
でも、もともとモノ作りが好きなタイプの人が多いのは事実。
実際にウェブを「動かす」ことができれば習得はとても早いと思います。
細かいところはどうでもいい。いい具合にモチベーションを保つにはどうするかを最優先に考えるべきです。
本は買わない
「ゼロから始めるHTML/CSS」
「初心者でも大丈夫PHP完全ガイド」みたいな本は絶対に買わないでおきましょう。
買ってしまうと、その本を終了することが目標となってしまいます。
買ったから読まないともったいないですもんね。
1冊読み終えるというのは結構大変だから達成感がありますが、
何冊読み終えても多分作れるようになりません。
ウェブ開発の知識は、ドカンと一発で得られるものではありません。小さな小さな情報をかき集めて、だんだんカタチが見えてくる。わからないことは毎回検索して少しずつ進んでいきましょう。買っちゃったなら本を読んでもいいですが、結局は後で検索することになるので結構時間の無駄です。
ブログをつくろう
先に「Wordpressでブログ制作することではない」と言いましたが、
ブログを作るのはとても勉強になります。
静的ページじゃないので難易度が高いと思うかもしれませんが、
こんな理由から、いきなりWordpressにトライした方がいいと思います。
- 目的がない静的ページを作っても「で？」となるからダメ
- ブログを自分の技術メモとして活用できる
- 誰かから突っ込みが入る
ブログには記事が必要です。
デザイナーでポートフォリオがあるなら、毎日アップしてもいいかもしれませんが、
大抵はクライアントとの関係に気を使って公表しないことが多いかと思います。
日記も3日坊主になりがちです。
技術メモは後から自分が見返すことになるので、自分のためになってオススメ。
いくつかカテゴリを作って、用途によって書き分けてもいいかもしれません。
Google Analyticsも導入して数字も見ましょう。
数字の力は結構すごいです。ポスターやパンフレットなどの紙のデザインでは味わえない別の満足感が生まれる可能性があります。作ったばっかりの時はほぼゼロですが、そのうち少しずつ増えていくかと。
この段階で参考にする教材は…
開発環境をつくる
ローカル開発環境の構築 (全13回) - プログラミングならドットインストール
→ 09 MySQLを導入してみよう まででOKです。
ウェブページの基本
HTML入門 (全16回) - プログラミングならドットインストール
CSS入門 (全18回) - プログラミングならドットインストール
CSS3入門 (全19回) - プログラミングならドットインストール
Wordpressの基本
WordPress入門 (全23回) - プログラミングならドットインストール
WordPressの使い方 - インストールから基本的な使い方まで
WordPress超初心者講座
WordPress Codex 日本語版
ほとんどドットインストールですね…。とても分かりやすく、難しいところはすっ飛ばして説明してくれてますので、初心者にはかなりオススメです。
あと、これらすべてをマスターする必要は全然ないです。
分からなかったらそのマニュアルは今のあなたに合ってないのかもしれません。別の教材を見てみましょう。
いきなりサーバーをレンタルして始めてみてもいいですが、
なるべくお金はかけずにローカル開発環境をつくることをオススメします。
多分、一番最初にして一番難関かなと思いますが、頑張ってください。
一回できてしまえば、後はその中をめちゃくちゃにしようが、もう一回作り直せばいいだけです。
インターネットがなくてもいろいろ試行錯誤できるのも良いところです。
ブログ運営
開発と運営は別物です。
晴れてブログが出来上がったら運営してみましょう。
運営といっても特別なことはありませんが、日々バージョンアップしていく感じです。
たとえば、
- 記事を書く
- ロゴをカッコ良くする
- プラグインを導入してみる
- トップページのテンプレートをカスタマイズする
- モバイルに対応してみる
- Analyticsで流入元を見てみる
- SNSで拡散してみる
- もらったコメントに返答する
などなど。挙げればキリがないですし、全部やる必要もないです。
妄想
さて、いよいよオリジナルのアプリの構想を練りましょう。
なんでもいいですが、こんなのあったら便利じゃね？！という妄想をすると良いと思います。
多分デザイナーは妄想は得意なはず。デザインだって問題解決だからね。
問題を見つけ出して、これを解決しよう！と考えていけば、何となくアイデアが出てくると思います。
実際のプログラミングはあんまり考えなくてもいいです。
実現可能かどうかは後で考えるとして、
「できるようになったらこんなのが作りたい」と想像することが大事だと思います。
で、それはひとまず置いといて…、
↓
フレームワークを学習する
フレームワークとはウェブアプリの制作を高速化させるプログラムの集合です。
頻繁に使用する機能もあれば、最初はほとんど使用する機会がない機能も入っています。
賛否両論ありますし、フレームワークがなくてもウェブアプリケーションは作れますが、
速攻で動くものが作れるのでフレームワークがいいと思います。
モチベーションを保つには、とにかく「動くこと」が大切。
とくにデザイナーはそうだと思います。
中身がどんなになってようが、目の前で自分が考えたものが動いて、表示されることが快感だったりするのです。（たとえそれが誰かから見られる事がなくても…）あと、何かが分かった時の「あー！」という感覚は、わけのわからないコードを見続けるには一番重要かもしれません。
フレームワークの選択ですが、各フレームワークの善し悪しではなく、
初心者に分かりやすいチュートリアルがあるものを選ぶといいと思います。
デザイナーにとってはPHPでもPerlでもRubyでも、違いはないですから。
ちなみに、WordpressはPHPで出来てますが、カスタマイズするために覚えるのはほとんどWordpress特有のテンプレートタグです。なので「WordpressがPHPだからPHPのフレームワークを選ぼう」と考える必要はありません。
個人的にチュートリアルが分かりやすいと思うのは、以下の2つ。
Wordpressではあまり意識しなかった「データベース」が出てきますが、頑張ってください。
デザイナーの自分としては、データベースにデータが1つ入っただけでめちゃくちゃ感動しました。
英語のリソースですが、下記のサイトもとても勉強になります。
- RailsCasts（一部有料）
- Code School（有料）
とりあえず作る
フレームワークのチュートリアルを終了したら、なんとなくアプリが作れるんじゃないかと感じると思います。
妄想していたような壮大なスケールのものは作れませんが、その一部を切り取ったくらいのものを「つくれるかも…」と思えたら、後はがむしゃらに手を動かすだけ。
ローカル環境で作って壊してまた作って… ウェブサイトがデータベースと連携してダイナミックに動けば、結構楽しいので、モチベーションは長目に続くはず。
公開
公開しましょう。どんなクソアプリでも。
人がたくさん来て注目を浴びていきなりスターかも…なんていうドキドキ感が味わえます。
まずあり得ませんが。
それでも、突っ込みが入ったり、コメントをくれる人がいるかもしれません。
それは次へのモチベーションになります。
もちろん著作権だったり、個人情報だったりは気をつける必要があります。
デザイナーは著作権とかの意識は問題ないと思いますが。
以上、自分のことを振り返りながらまとめてみました。
まとめてみると意外とこんなもんか、と思ったけど、道のりは結構長かった気がします。自分の場合は勉強し始めて最初のアプリを公開するまで6ヶ月だったかな。閉じちゃいましたが。
つくった後、まだ運営を続けているサイトはこんな感じです。
それと、今回新しくサービスを公開しました。
チームでやってますが、デザイン&開発は自分で全部やってます。
よかったら使ってみてください。
デザイナーとして思うこと
ウェブやらなくったって全然問題ない気がします。が、デザイナーなら何でも作りたい願望というのがあるから、ウェブやってもいいんじゃないかなとは思います。バックエンドの開発やらなくてもフロントエンドデベロッパーとかね。日本企業ランディングページ作るのとは全然違うと思うから。
Javascriptがなかなか高い壁になるのかもしれないけど、動くから楽しいよ！