【KROWL】「Web制作初心者向けワイヤーフレーム作成ワークショップ」に参加してきました

感想

結論から言うと、めちゃくちゃタメになりました。

年明けにも同じ内容で開催されるそうなので、気になる方はぜひ参加してみてください。

参加費は無料です。定員は20名程度。
前回は募集期間中に満員になったそうなので、応募される方は早めが吉。

一応リンク貼っておきます。

1/23(木)ワイヤーフレーム作成ワークショップ／Web制作初心者向け

概要

きっかけ

KROWLさんの公式ホームページのコーディング課題でCSS設計の練習をしていたのですが、その際にバナーをチラッと見かけ、

と思い、応募しました。

【募集終了】12/19(木)ワイヤーフレーム作成ワークショップ／Web制作初心者向け

場所

東京都港区赤坂3-17-1　いちご赤坂317ビル6F

スケジュール

1. ご挨拶・座談会
2. ワークショップ
3. 質疑応答

持ちもの

筆記用具のみ（パソコン不要）

どんなワークショップ？

ワークショップと言っても、周りの人と共同作業とかするわけではなく、一人でもくもくと考えて制作する感じでした。

教員時代にもワークショップはよくやっていましたが、ガンガンに意見交換したり発表したりしていたので少し身構えていましたが、そういうのではなかったので安心しました(^^)

鈴木 秀典（すずき ひでのり）さんのご挨拶

今回講師をしてくださったのは、フリーWebディレクター/プロデューサーの鈴木秀典さんです。

https://twitter.com/hidenori_KROWL?s=20

twitter.com

KROWLのディレクターだけでなく、エグゼクティブマネージャーだったりご自身の会社で社長もされていたりと、マルチに活躍されているつよつよな方でした。

経歴・キャリアについて

Twitterのプロフィールより。

派遣社員なども経験されていたそうなのですが、特に印象に残ったのはWebディレクターとして雇われたものの、実際はコールセンターで電話対応をしていたという話。

目の前のこと、自分の出来る範囲のことを一生懸命やるが大事

コールセンター業務だった中でも鈴木さんは仕事の合間を縫って、得意・不得意関係なく、とにかくチャレンジして、目の前のことを一生懸命やったそうです。

この言葉にとても感銘を受けました。
やはり行動することが一番大切なんですね。。。。

今でこそWebディレクター・エグゼクティブマネージャー・社長という地位に就いていますが、Web業界に入った当初はそのようなキャリアパスを考えていなかったそうです。

「目の前のことを一生懸命やっていた結果、今の地位になった」とのこと。

「何になりたいかフワッとしている人」も目の前のこと、自分ができる範囲のことを一生懸命やることが大切」ということも仰っていて、今の私はまさにそれだったのでこれも心にグサリと刺さり、頑張ろう！と思いました。

ちなみに鈴木さんもエンジニアを目指していた時期があったそうですが、
「勉強すればするほど闇が深くて諦めました…笑」

とおっしゃってました。ものすごく共感…。

ワークショップ（ワイヤーフレーム制作）

今回は、あらかじめ鈴木さんが設定されたお題に沿って、ワイヤーフレームを作成するというものでした。

今回は、架空の商品のLPという設定。

実作業時間は40～50分くらいだったかと思います。

作業の合間に鈴木さんが見て回ったり、ホワイトボードに考え方などのヒントを書いたりしてくださっていて、それもありがたかったです。

鈴木さんはきっと、教師としても十分やっていけます。（何様

実際に作業したプリント

最近ウェブ心理学の勉強もしていたので、それを自分なりに盛り込みながら考えました。

色々書き込んであるのは気にしないでください^^;

 

最後の作業は、要素を付箋に書き込んでレイアウトするというものでした。

付箋ならすぐに貼り直しできるので、このシステムは便利だなと思いました。

質疑応答

最後に質疑応答をして終了。終わってからも残って作業されている方も結構いました。

ワークショップで学んだこと

ディレクション能力はWebデザイナー・エンジニアにも必要

Webの仕事は人（クライアント）ありきなので、Webデザイナーでもエンジニアでも人と人の間で調整が必要になります。

Web業界で仕事するならディレクション能力というのは必要になってくる、と鈴木さんは仰っていました。

ワイヤーフレームはデザインを意識させない

ワイヤーフレームを作る段階で大切なのはレイアウトなので、シンプル（カラーは白黒）にしてデザインを意識させない、ということを学びました。

確かにバナーを作成するときなども、最初は色をつけないでやる方がよいですからね。それと似ているのかもしれません(´ε｀)

ペルソナ設定が一番大事

私は今までこの工程をおろそかにしていたので、ハッとさせられました。

というのもコーディングばかりやっていると、どうしても見せ方や使いやすさなどの機能美ばかりを考えがちですが、それは目的ではなく手段でしかない。

サイトやLPを制作する背景があってこそのデザインやコーディングだと改めて気付かされました。

---

今回のワークショップは水の商品販売のためでしたが、水１つとっても色んなペルソナ設定が出来るということを解説されていました。

例えば、こんな設定があります。

今回はWeb広告からの流入が前提でしたが、広告をクリックするかどうかはデザインの比重が大きいと思うので、バナーデザインもワイヤーフレームやサイトデザインと同等に重要なんだと気付かされました。

LPワイヤーフレームの基本レイアウト

LPのワイヤーフレームは大きく２種類。

商品PRなどの訴求型の場合、以下のレイアウトが一般的だそうです。これもとても勉強になりました。

ポートフォリオサイトなどでも応用できそうですね。

SEO対策・サイト高速化の知識は大事

上図にチラッと書いてあるように、どれだけ魅力的なデザインなサイトやLPでも、めちゃくちゃ重くて読み込みが遅かったら、離脱者が出て中々サイトを見てもらえなくなります。

加えてグーグルの評価が落ち、表示順位が下がり、訪問者が減るという悪循環に陥ります。

このSEO関係の知識はディレクターだけではなく、エンジニアなどにとっても必要ですね。

まとめ

私も2018年の1月に闇派遣会社でWebディレクターを紹介され、辞退した経験があります。

当時はWebディレクターというと
「案件のスケジュール調整をして、ヘコヘコしながらクライアントやWebデザイナー・エンジニアの仲介をして、ストレスを感じながら仕事をする」

というイメージでした^^;（現役ディレクターの方すみません

その後も「ディレクター」という職種の方と会うことなく仕事をしていたので、偏見を持ったままでしたが今回のワークショップで鈴木さんと会ってみて、とても魅力的な職種だなと感じました。

肩書を自分で作り出す時代

今度、Web心理学の記事でもお伝えしますが、肩書なんて本当に名乗った者勝ちだと思います。

鈴木さんの「エグゼクティブマネージャー」という肩書を聞いて、それがどういう事をするポジションなのか全くわかりませんでしたが、「なんか凄そう」「なんか強そう」と感じました。

でもそれによってクライアントは興味を持つだろうし、私のように「強そう（頼れそう）」と思わせることもできます。

私も近々そういう新しい肩書を作ろうと目論んでおります…フフッ（きもい

次回、同じ内容でワークショップが開催

私はKROWL関係者ではありませんが、私のようにWeb制作を勉強中の方、初学者の方はぜひ参加してみてください。とても勉強になります。

1/23(木)ワイヤーフレーム作成ワークショップ／Web制作初心者向け