このブログはMD Advent Calendar 2017 - Adventarの8日目の記事です。(大遅刻)
初めましての方は初めまして!そうでない方はお久しぶりです!(久しぶりとは言ってない)
ゆゆき (@yyk_kk) | Twitterです。保坂です。去年MDを卒業し今年はMDの助手をやってました。クビにならなければ来年もいる予定です。クビになったらウケるよね。
今まではTumblr カタツムリのつもりで文章を書いていたのですがしんどみが厳しいのではてなブログを始めました。最近pixie 「ゆゆき」のプロフィール [pixiv]で小説を上げたら生まれて初めてランキング入りして驚いてます。メジャージャンルってすげー!
昨日のアドベンドカレンダーはえからちゃんのその時に話したいと思ったことを話す - たいちょの日記でした! どうも、頼りがいのある先輩です。
ソシャゲの課金ちゃんとしようと思いました…… サンソン先生に課金したいのですがセイバークラスかルーラークラスでの実装ありませんかね……? 無い? そう……。
助手展のWebを作ってます
一つ恐ろしいことをいうとまだ完成していません!!!理由は私が作業やってないからです!!!
本来は11月頭に公開予定だったのに……DMそろそろ送るのに……なぜ……
と、いう訳で今回は気の早い反省会(終わってない)を兼ねて初めてWebサイトを作るときにやっておいた方がいいことを書き連ねて行こうと思います。お察しの通り全部反省と言い訳です。
1:仕様書を作る
大前提として、自分一人でWebサイトのコンテンツを集めてデザインをしコーディングする、ということはあまりありません。大抵はコンテンツはクライアントが、デザインはデザイナーが、そしてコーディングはコーダーがやります。最近Web制作会社はデザイナーがコーダーを兼ねることも多いそうです。例外としては、産学連携事業等で自分たちが作ったコンテンツを自分達で宣伝するってぐらいかな? それでも自分一人で完結してしまうことはそんなに無いと思います。
で、そういうときにまずは仕様書を作りましょう。仕様書はWebサイトを作るときの共通ルールです。これがないと全てにおいて苦労します。
仕様書にこれを書いておけリスト
- 対応する端末。基本的にはスマートフォンのデザインがメインになる。タブレット版を入れるのか、PC版はどのぐらい古いブラウザまで対応させたいか
- 全体のページ数
- コンテンツのデータは誰が集めるのか、誰が編集するのか
- (例えば複数人から集めるとすれば)形式はどのように整えるのか。プロフィール等の文字数や並び方など
- カンプデータ、素材データ、文章の流し込みのデータの拡張子
- とりあえずここまでやったら多少未完成でも公開しようねの期限
- 全てを含めた工数。どんな作業があって、どれぐらい手間がかかる予定なのか。1日に稼働できる時間込みで考える。学生の時にお金を貰うなら時間×(基本給1000円+技術量で200円とか難しいことやるなら500円とか)で計算する。
一つ一つ解説するとすごく長いので省きますが、実際にやってみればわかります。
2:コーディング指示書を作る
上の仕様書はWebサイトの全体の制作フローにおいて必要となりますが、コーディング指示書は名前の通りCSSやjsのコーディングするときに必要になる情報です。特にグラフィック系からの出身のデザイナーは「ここの文字のウェイトを……」とか「ここの字詰めを……」とか「難しかったら文章全部画像で書き出しちゃえば良くないですか?」とか平然と言ってくるので、明確にWebデザインでやれること・やれないことを伝えておきましょう。
コーディング指示書これは決めとけリスト(画像でなく文章として作る。何故なら色コードとかをコピーするので)
- 文字や画像の大きさ(◯◯px。h1とかタグ毎に書いておくとわかりやすい。)
- 各種カラー(16進数、rgba)
- フォントの種類+それに似たWebフォントを指定しておいてもらう
- div構造の書き込み(これはWebやってない人には大見出し、小見出し、本文とどれが大枠でどれが中枠なのか書いてもらえばOK。display:flexとかorder:nとかで役に立つ。)
- アニメーションをつけるならどこにどんなものをつけるのか。
WebフォントはただでさえwindowsとMacとでデフォルトフォントが変わるのにさらにくそ重たい日本語Webフォントを入れては「ちょっとイメージと違う……」と言われがちなので、最初っからデザイナー側にWebフォントなら何するか、もしWebフォントで気に入るものが無い場合画像にするのか、そこを画像で処理するほどのこだわりは本当に必要なのか聞きましょう。
3:餅は餅屋に任せてもらう勇気
この間講演会に来た人も餅は餅屋に任せてもらってディレクター(発注元)はさっくりした感じで頼んでくれるのがいい発注って言っていた!!!
Webデザインやったことないけど一応グラフィックのイメージと合わせたいんですよねって言われたらまずコーダー側からワイヤーフレーム書いてこれに沿ってくださいって言う。もしくは上がってきたデザインをコーダー側で手直しするのがいいです。
それはWebデザインやってないとUIの話をイマイチ理解されないからです。
ぶっちゃけ、文章全部画像で貼るんだったらWebデザイナーやWebコーダーなんていらないんですよ、Wixにでも作らせとけって話なんですよ。Webデザイナーはデザインを誰もが手に取れるコードに直すことが仕事なんですから。Webデザイナーはカッチョイイデザインを作るのが仕事ではなく、「見やすく・わかりやすく・伝えやすく・美しい」メディアを作ることが仕事です。
ここまで偉そうに言うには自分の知識量が一番大切です。
Webデザインやコーディングはとても早いスピードで進化し続けています。一年前の知識が「もう新しいもの出たよ」なんて言われてしまうのが常の世界です。
勉強をしましょう。たくさんの知識を取り入れましょう。知らないことに対して貪欲になりましょう。たまにWebデザイン系のニュースサイトを読むぐらいでいいんです。あ、これ使えるなってことを増やしていってください。
逆にやってよかったこと
- ポモドーロテクニック。25分は集中し5分休みを4セット繰り返すやつ。詳しくは調べてね! 私は集中力が弱いのでやる気がでないときに重点的に取り組みました。
- 困っていることを文書化する。これで解決した事案がありました。文章化は自分の頭の整理にも繋がります。
- 他人のデザインでWebサイトを作ると言う経験。(実際UI的には如何なものかと思いつつも)自分では絶対やらないようなレイアウトをCSSで動かしたので経験値的には極大成功ぐらい貰いました。なお終わってはいない。
最後に
色々偉そうにご高説を垂れてみましたが、言いたいこととしては
関口先生の授業の内容が一番基本で基礎の大切なところ、そして関口先生の授業の内容を活かすためにも日々の勉強は忘れずに!
と言うことです。
仕様書もコーディング指示書も、コーダー側が知識を持っていないと作れないものです。そして人に物事を教えるには人の3倍理解していなくては出来ない…… 私の一番の失敗は、Webコーディングから離れていた期間が長く、忘れていた知識があったことなんです。だから仕様書も指示書も作れずに、クソみたいなコードを書きクソみたいな手直しを延々と繰り返しています。
Webの勉強は英語に似ています。使わないと忘れてしまうんです。身体的な感覚に刻みやすいデザインの知識とは少し違います。
学生の皆さん、きっと勉強はあまり好きで無いでしょう。自分には必要無いと思っていることも単位のためと嫌々やっているでしょう。
でも、皆さんが大学4年間で学んできたことは全て無駄になることはありません。卒業した今だからこそ言えます。私には、映像も、UIも、Flashも、インフォグラフィックスも、Webコーディングも、そして一般教養の勉強も、全て良い経験として身に付いています。卒業して、大学での勉強がどれだけ楽しいものだったかを思い知りました。
四年生の皆さん、大学生活四年間よく頑張りました。きっと、今になってもっと勉強したかったことを思い起こすことがあるかもしれません。でも、皆さん四年間大変な思いをして勉強して来たのだから、きっと一人でも新しいことを勉強できます。現代に生きる私たちは、どうあれ今後ずっとメディアと触れあいながら生きていくのですから。
三年生の皆さん、大学生活も気づけばあと一年ですね。どうぞ、悔いの無いように好きな授業をたくさん取ってください。私も四年生で受けた授業が一番楽しかったです。卒業制作や就活で困った時は助手を頼ってください。あなた方に応えられるよう、私も勉強を続けます。
二年生の皆さん、きっと悩みの多い時期でしょう。大学にいる意味を見失ったり、一年生の頃の自分より成長できているか心配になったり。大丈夫です、一年生の頃のあなた方をSAとして見ていたので、この二年間でしっかり成長出来ていることはよくわかります。そして、もし大学の外で学びたいことがあると確固たる信念で飛び出していくなら、それは決して悪いことではありません。
一年生の皆さん、おそらくなんとなくの方向性を思い描く頃かと思います。一つのことだけを勉強したいと思う方、その一つを活かすために他のことも勉強してください。色んなことを勉強したい方、1つに絞った方がいいんじゃないかという言葉に負けずに色々なことを勉強してください。それは必ず糧になります。
さてはて、こんな感じで今年のアドベンドカレンダーは終了です。
明日(※今日)は陽子さん@soymilk007 の真面目な話をする、です! 遅れてごめんね!