--- title: "グラフィックデザイン制作会社様へWebについてレクチャーしに行ってきました" canonical_url: "https://olein-design.com/blog/lecture-for-graphic-design-company-about-web" language: "ja" date_published: "2017-07-28T10:48:46+09:00" date_modified: "2017-07-28T10:48:46+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "備忘録" --- # グラフィックデザイン制作会社様へWebについてレクチャーしに行ってきました 先日、第三者様からの紹介でOlein Designが活動している同じ岐阜市内のグラフィックデザイン制作会社様へお話を伺いにいく機会がありました。 当初は**コーディングや実装を外注できるパートナーを探している**という内容での相談だったのですが、その時点では発注できる案件はないので、まずはコミュニケーションを取りましょうということでお話を聞きに伺いました。 その際に、こちらが行なっている業務内容やWordPressに関する取り組み、または僕自身のバックグラウンドの話など、様々な話をしてきたのですが、終わりがけにこんなお言葉を頂きました。 うちのスタッフはウェブに関する知識はあまりないので、ウェブに関するレクチャーをお願いできないか（意訳） というような感じだったと思います。まさかそんな依頼が来るとは思っていなかったので内心ビックリしたことは否めませんが、これは自分にとっても大きなチャンスというか、試してみる場だと思い、お受けすることにしました。 そして、昨日改めてお伺いして**「Webについて学習するときに押さえておくべき点」**と題して、2時間程度お話してきましたので、その内容を振り返りながらまとめておきたいと思います。 ↑え？こんな立派なスライドとか作ってきてくれたんですか？とビックリ喜んでいただけました。ちなみに、プロジェクターは先方になかったので持ち込みましたw ## まずは簡単な自己紹介 先日は社長様への自己紹介だけでしたので、スタッフのみなさまにも自己紹介を兼ねて簡単にバックグラウンドをご紹介させていただきました。 岐阜生まれで岐阜育ち。出身高校は御社から自転車で５分の所ですよ〜とか、そんなお話をしてきました。また、広告代理店の制作部に属していたことや、ロンドン留学などのお話も織り交ぜながら、現在に至る流れを簡単にお話しました。 加えて、WordPressの勉強会をやってますよーという宣伝もしてきました！w ## アジェンダ ![](https://olein-design.com/wp-content/uploads/2017/07/agenda.png) 今日はこんな流れでお話しますよ〜ということでアジェンダを紹介しました。 1. Webって何？ 2. インターネットの仕組みとは？ 3. グラフィックデザインとWebデザインの違いとは？ 4. Webサイト制作の流れとは？ 5. Webサイトを納品した後に必要なこととは？ 6. まとめ このような流れでレクチャーは進みました。 ## Webって何？ **Webって何？**ということで、まずは「WWWとは」や「インターネットとは」といった言葉の概念を感覚で掴んでおいてもらうために再確認しておきました。 また、実際にみなさんが使われている環境をサンプルで挙げながら、こうやってインターネットは使われていますという紹介をしました。 ごくごく当然のことなので、引っかかることなく進みます。 ## インターネットの仕組みとは？ ちょっと踏み込んで**インターネットの仕組み**についてのお話です。 といっても、本当のインターネットの仕組みのお話をしても仕事に直結しないのでそこは割愛しました。 それよりも**「サーバーってなんぞや」**や**「ドメインって何？**、**「httpsってなに？」**という説明をしていくことで、現在から今後にかけて必要になってくるチップスを加えながらお話しました。 ## グラフィックデザインとWebデザインの違いとは？ こちらのセクションでは**基本的なグラフィックデザインとWebデザインの違い**を確認します。 単位の話や色の再現方法の違いなどがメインになってきます。また、成果物から生まれる体験の違いからメリット・デメリットを考えてお客様に提案していくことが必要になります、というお話もさせて頂きました。 そして、グラフィック（印刷物）が狙えるターゲットとウェブが狙えるターゲットは違ってくるので、そこも把握した提案が必要になってきますということもご紹介しました。 ## Webサイト制作の流れとは？ ワークフローに関して正解はないと思っていて、人や会社が変わればベストなものも変わってはずなので、あくまでも簡易・一般的なフローということで以下の流れでご紹介しました。 ### ヒアリング まずは**クライアントからヒアリング**を行います。 その際に気をつけることなどを簡単に紹介しました。ここで聞きだせるだけ聞き出すことが大切になってくることや、漏れがあった場合には次の工程にどんどんと響いてくるというお話もしました。 ### 要件定義 ヒアリングした内容を踏まえて**要件を定義**します。 この定義に漏れたことは別案件・別工程を組むくらいの気持ちで漏れのないようにしましょう！ともお伝えしました。 ### ワイヤーフレーム 要件や仕様が決まったら、ワイヤーフレームを作成し画面構成を固めます。 この部分があやふやな場合には絶対に次の工程に進めませんともお話しました。先のデザイン部分、コーディング部分での修正は全て戻らなくなるから、結局工数が増えて制作サイドが辛くなりますというお話をしました。 ### デザイン制作 ワイヤーフレームが固まったら、次はデザイン制作です。 お話している相手はグラフィックデザイナーさんなので、**グラフィックデザイナーさんに気をつけて欲しいこと**なども盛り込みながらお話しました。 具体的には、ホバーアニメーションや他のアニメーションなどにはしっかりと指示を出せるようになった方が良い、や、データを綺麗に作らないと（レイヤー名などもしっかりと付けて）コーダーが不用意にデータを触って意図しないトラブルが発生することもありますよ、というお話をしました。 気持ちとしては、印刷入稿する（印刷したら取り返しつかない）気持ちでデータを渡してください、と伝えました。 ### コーディング マークアップ言語などでコーディングします。 WordPressなどのCMSを使う場合には、別に必要な工程も入ってきたりするので、しっかりと想定しておかないといけない点や、最近のCMS事情なども簡単にお伝えしました。 ### 実機テスト 実際にブラウザやデバイスで表示を確認します。 この時点で、どんなデバイスで確認するのかを明確にするのではなく、要件定義の時点でしっかりと明確にしておく必要性をお伝えしました。 そうしておかないと、やらなきゃいけないことがイタチごっこになってしまうからです。気をつけましょう。 ### 納品 これで納品となります。 しかし、納品の形もしっかりと事前に決めておかないと、あとから「あれをくれ」「このデータをくれ」といった要望が出て来ることもあるので、要件定義や仕様部分で明記しておくことが大切です。 ## Webサイトを納品した後に必要なこととは？ 制作会社にもよりますが、デザインにウェイトを置く制作会社さんではあまり運用ベースに携わらず作って終わりという感じのところも、まだまだ少なくないとは思いますが、やはり**ウェブサイト制作が終了したら、次はウェブサイト運営の開始**ということを念頭に置いておかなければなりません。 そして、その運営に必要な知識としては - SNSに関する知識 - アクセス解析に関する知識 - 別媒体の可能性 - リスティング広告の知識 - ランディングページの必要性 - オウンドメディアの知識 などが必要かなと紹介しました。 また、**作って終わりではありません。日々改善していくのがウェブサイトですよ**ということを、しっかりとお客さんに伝える必要がありますとお話しました。 ## まとめ ここまでお話した内容をまとめながら、**「Webは魔法の道具ではありません」**ということをお伝えしました。 **「人力」をかけるか「お金」をかけるか**どちらかを選択するべきだと紹介しました。放っておいては望んでいる結果は得られません！ということをしっかりとお客さんに理解してもらう努力が必要です、とお伝えしました。 --- と、こんな具合でお話を2時間ちょっとしてきました。 当然ですが、ずーっと話っぱなしではなく、随時質問もお受けする形をとり、途中に１回休憩も入れて行いました。 個人的には、**「ずっと話をする」**というよりは**「対話形式で話を進めていく」**方が向いているかな、と感じました。というか、その方が僕が楽しいだけかもしれませんが。。。 質問を受けてお答えすると、自身の理解が進んだ気がしますし、実際に2時間お話させていただいて、相手側のスタッフさんよりも僕の方が得るものが多いのではないかと感じるくらいの収穫がありました。 今後は、こういったレクチャー業務もどんどんと取り入れて行ければなと考えています。話す内容も色々とネタを増やしいて行きたいですね。 今現状では、**「初心者入門WordPress」**とかならできるかな？と思いますが、その後にも続くように開拓して行きたいと思います。 **Olein Designにレクチャーやレッスンを受けてみたい！という方、対面でもリモートでも対応していますのでご要望お待ちしております！**