【2017年まとめ】これからのWeb制作に必要なことと、心構え | デザインってオモシロイ -MdN Design Interactive-

【2017年まとめ】これからのWeb制作に必要なことと、心構え

2020.5.25 MON

【連載】CPIエバンジェリストのお悩み相談室⑥
【2017年まとめ】
 これからのWeb制作に必要なことと、心構え


2017年12月13日
TEXT:阿部 正幸(KDDIウェブコミュニケーションズ)

1991年に世界初のWebサイトが誕生してから今年で26歳となりました。目まぐるしく変化してきたWebの世界ですが、2年後、5年後とWebはどうなっているのか、この仕事を続けていられるのかなど気になる方も多いのではないでしょうか。当記事を執筆している阿部は不安で仕方がありません。

不安だ、不安だと言っていても仕方がないので、今後のWeb制作に何が必要か、この業界で生きていくためにはどうしたらよいかを、エンジニア、デザイナー、ディレクターそれぞれの立場から考えてみました。

エンジニアとしてできること 

まずエンジニアとして今後何が必要なのか、昨今話題になっていることをピックアップしました。

・APIファースト
・ページ表示速度
・マーケティングオートメーション
・パーソナライゼーション
・ページ分析

Webサイトは何かの目的を達成するためのツールで、売り上げ、ブランディング、集客などのために作られることが多いです。私もWeb制作に携わる中で、「その施策を行うと売り上げが上がるのか?」とよくお客さまから聞かれます。 

エンジニアとして今後必要な事項にあげた「ページ表示速度」、「マーケティングオートメーション」、「パーソナライゼーション」、「ページ分析」は、全て売り上げに直結します。

ページ速度の改善
ページ表示速度が遅いと、直帰率は高まりサイト回遊率は下がります。結果、検索順位は下がり、CV(コンバージョン)数が落ちると言われています。
* CVとは何かの目的を達成した数値

ページの表示速度を向上させるために、エンジニアは様々な技術を知っておく必要があります。例えばページキャッシュ、CDN、ネットワークの最適化、Webサーバーのチューニング、画像・CSS・JavaScriptファイルなどの最適化など、すべて高速化のための施策です。
* CDNとはContents Delivery Networkの略で コンテンツをクラウド上にキャッシュさせ効率よく配信するシステムです

Googleが無料で提供する速度調査ツールで、サイトの表示速度をチェックできますので、みなさんのWebサイトも確認してみてください。
「Google Developers PageSpeed Insights」
URL:https://developers.google.com/speed/pagespeed/insights/


マーケティングオートメーション
A/Bテストを実施し自動で最適なページが表示されるよう切り替える、顧客をセグメント分けしてメール案内を行うなど、マーケティングオートメーションツールの利用が注目されています。SalesforceやSATORI、オープンソースのMauticなどいくつかプロダクトがあるので、エンジニアとして代表的なマーケティングオートメーションツールは押させておきたいところです。

パーソナライゼーション
パーソナライゼーションは、ユーザーの特性に合わせた情報を提供できます。例えば本屋のサイトに「30歳、男性、野球観戦が趣味」のユーザーがアクセスしてきたとします。その場合、10代が読むような少女漫画をトップに出すより、ビジネス書や野球に関する書籍をトップに出した方が、本の売り上げは伸びるでしょう。

数年前よりパーソナライゼーションの話題が出ていますが、導入はそこまで進んでいません。エンジニアとしてどうしたらコンテンツの出しわけができるようになるかなど、技術として知っておく必要があるでしょう。

ページ分析
ページ分析はサイトの売り上げをあげるために必ず必要です。どのような経路でサイトに流入しコンバージョンしたのか、どのようなコンテンツに興味をもったのかなどを分析し、CVを高めていきます。エンジニアの作業としては、解析用のタグをWebサイトに埋めるということくらいですが、どのようなツールがあるかは知っておく必要があるでしょう。

これら5つは実際に売り上げをあげるために必要な事項で、お客さまからも求められます。何か聞かれた時に、すぐに応えられるように押さえておきたいですね。

APIファースト
次に押さえておきたいのはAPIファーストで、APIを中心にWebサイトや、アプリケーションなどの設計を行います。考え方としては、コンテンツをAPIサーバーに集約し、Webサイトやアプリケーションがコンテンツをリクエストします。そのリクエストに応じてAPIサーバーがコンテンツを返答し、Webサイト上に表示を行うということです。



APIファーストが注目を浴びるのは昨今の時代背景からです。現在1社が保有するWebサイトが増加傾向にあります。コーポレートサイトやプロダクトサイト、社長ブログ、ランディングページなど複数サイトを運営しているのが普通の時代です。それに伴いCMSが増えていくと、セキュリティアップデートやユーザー管理などの管理工数も膨らんでいきます。

また、コーポレートサイトで書いた記事を社長ブログやその他サイトにリンクを出したい、アクセスしてくるユーザー端末の増加のためにフロントを柔軟に改修できるようにしたい、などの課題を解決するためにAPIファーストが注目を浴び、利用が進んでいます。

下記の図はAPIサーバーにコンテンツを集約し、Webサイトの他に、コーポレートサイト、デジタルサイネージ、アンドロイドアプリにもコンテンツを配信しているイメージ図です。



APIファーストが注目される理由として、下記のメリットなどがあげられます。
・コンテンツを効率よく様々なシステム・サイトに配信できる
・外部システムとの連携が容易
・デザインとシステムの分離
・複数サイトを管理した場合の運用コスト削減
・追加開発コスト低減、サイトリニューアルが容易に


現在日本で多く利用されているCMSのWordPressやMobableType、また世界で多く利用され私も好んで使っているDrupalにはREST APIが標準で装備されていますので、導入は比較的容易に行うことができます。

APIファーストとよく耳にするようになりましたが、エンジニアとして実際に導入するとなったら、どのようにして導入できるか、どのようなデメリットがあるかなど押さえておくとよいでしょう。

デザイナーとしてできること 

次に、デザイナーとしてできることについて考えてみます。ただ私はデザイナーではないので、数々のデザイン系イベントに登壇している、黒野明子氏と、浅野桜氏に話を伺いました。
黒野 明子(くろの・あきこ)crema design
ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webサイトの企画・UI設計・デザイン・コーディングおよび講師・執筆などが主な業務。
浅野 桜(あさの さくら)
印刷会社、化粧品メーカーを経て株式会社タガス設立。社是は「つなぐをつくる、つくるをつなぐ。」販促領域の制作業務を中心に、中小企業が抱える販売促進全般の問題解決にあたる。

阿部氏デザイン面で「これからのWeb」に必要なことや、心構えなどありますか。


浅野 桜さんWebデザイナーは、Webサイトとアプリのデザインを兼ねるケースが多いです。前者と後者ではフローや役目など性質が違うので切り分けて考えます。デザインツールのアプリは、AdobeやSketchなどが便利です。ただし、現場によって異なるので、コレをこう使えば良いというのは無いですね。ワークフローに応じて柔軟に新機能を使っていくのが良いのではないでしょうか。

阿部氏以前はアプリのデザインは少なかったですが、ここ数年では増えてきていて、今後も増えるということでしょうか。

浅野 桜さんはい。場合にもよりますが、今後はマイクロインタラクションを含めたデザインができると良いですね。「文字を太くする」「コントラストをつける」と同じ要領で、「動きをつける」という選択肢が必要です。

阿部氏マイクロインタラクションは、ユーザーがどんな操作をしているかなどを、アニメーションなど小さな(マイクロ)やり取り(インタクション)を通じて、分かりやすくすることですよね。マイクロインタラクションもデザイナーに求められるようになってきたと言うことですね。

浅野 桜さんそうですね。デザイナーにも今後必要な知識です。


阿部氏「デザインツールは、AdobeやSketchが便利」と仰っていましたが、何か使い分けしている理由などありますか。

浅野 桜さんアプリについては「相手とデザインによって使い分ける」という感じです。昨今ではAdobe、Sketch共に人気があるので、セミナーなどで挙手制のアンケートを取ると、票がバラバラになると思います。



阿部氏なるほど。浅野さんはAdobe派ですか?
 

浅野 桜さん現状Adobeでデザインすることが多いです。ただSketchも便利なので、どちらも使い倒し、案件によって使い分けられるレベルまで持っていきたいなと思っています。


黒野 明子さん私も本音ではAdobeとSketch両刀使い(使い分け)になりたい派です。



阿部氏

どのような場面だとSketchで、どのような場面でAdobeかは気になりますね。私は両方使えないので、まったく分からないです^^;

浅野 桜さん

プロトタイプツールのAdobe XDやSketchは簡単に触れるので学習コストが少なくて良いのですね。


黒野 明子さん

デザインツールは他にもまだ沢山あります。Adobe XDはとても優れたツールですが、アメリカでプロトタイプツールと言えば、axureがデファクトスタンダードと聞きました。

URL:https://www.axure.com

URL:https://www.axure.com

グラフィックツールとしてはAFFINITY DESIGNERが注目されているようです。
URL:https://affinity.serif.com/en-gb/designer/

URL:https://affinity.serif.com/en-gb/designer/

阿部氏

AFFINITY DESIGNERのプロモーション動画むちゃくちゃカッコイイですね!!


黒野 明子さん

はい。限られたツールしか使えないのではなく、様々なツールを知り変化に強いデザイナーになることも、今後求められます。「世の流れに気を配らないと、生き残れない」ということですね。

阿部氏

名言出ましたね!!(笑)1つのツールにとらわれることなく、臨機応変にツールを選ぶ。また、Webやアプリ、インタクションも含めたデザインができることが、今後必要ということですね。ありがとうございました!

ディレクターとしてできること 

次は、ディレクターとして出来ることについて、福岡のセミナーイベント「!important」で登壇した際に、インタビューを行いました。
向かって左:前川氏、中:松田氏、右:阿部 (写真/サン・スタジオ:鍋坂樹伸)

向かって左:前川氏、中:松田氏、右:阿部 (写真/サン・スタジオ:鍋坂樹伸)

松田 直樹(まつだ・なおき)株式会社まぼろし
ゲーム業界にて企画開発に従事した後、Web業界に転身。Webサービス・アプリ、管理画面等の情報・構造設計、UIデザインを得意とし、数多く手がける。また日本史系メディア運営とライティングも行う。
前川 昌幸(まえかわ・まさゆき)株式会社イー・ネットワークス
岡山県在住。小売店、飲食業を経て2000年よりWeb制作に従事し、2014年7月からイー・ネットワークスに所属。職域はサーバーセットアップ・保守、サーバーサイドプログラミング、マークアップ、フロントエンドエンジニアリング、プロジェクトマネージャー、企画、ディレクションなど。
阿部氏

ディレクターに必要なことはなんでしょうか。



松田直樹さん

デザイナーとエンジニアとの共通言語を持つために、仲間内で情報交換を頻繁にすることが、ディレクターには必要です。情報交換は飲みに行ったり、勉強会に参加したりするのが良いのではないでしょうか。

前川昌幸さん

自分たちがどれだけのことをできるか。その出来ることをお客さまに対して、しっかり伝えることができるかがディレクターに求められます。


阿部氏

デザイナー、エンジニア、お客さまの橋渡しを適切にディレクターが行うために必要なことは何でしょうか。


前川昌幸さん

「お客さまの欲しいもの(ニーズ)を機能に脳内で置き換える」これをディレクターが行う必要は必ずしもありません。(出来るに越したことはないが)お役さまの欲しいものを適切にエンジニアに伝えることが重要です。

阿部氏

ディレクターにとって必要なことは、自分たちが何をできるのかの把握と、要件を適切に伝える能力が必要ということですね。では、これからのWebに必要なことは何かありますか。

松田直樹さん

先ほどの話と同じになりますが、Web業界は変化が激しいので、広く浅く情報を入手するのが重要です。


阿部氏

情報の入手先はどのような所がありますか?



松田直樹さん

私はChromeの拡張ツール、Pandaを導入しています。Chromeを立ち上げると海外のトレンド情報を確認できます。

前川昌幸さん

ソーシャルのタイムラインで確認することも多いです。Facebookグループの「Webクリエイターのための情報交換所」では、Web制作に関する様々な情報を発信しています。
URL:https://www.facebook.com/groups/241838242545737/


阿部氏

今後のWebを考えると情報収集が重要で、その他に自分たちができることの把握、的確に情報を伝えることがディレクターに必要ということですね。



結論

エンジニアはバックエンドの作業が多く売り上げに直結しないと思われがちですが、昨今では売り上げに直結することが多いです。Webサイトは作って終わりでなく目的を達成するためのものなので、様々なプロダクトや技術を押さえておくと良いでしょう。

デザイナー、ディレクターは、どちらも情報収集が鍵だと意見をいただきました。目まぐるしく変化するWeb業界だからこそ、情報収集が必要ということですね。

個人的には、写真素材が動くシネマグラフや、インタクションに興味があります。インタラクションは「Codrops」をウォッチし、良さそうな動作などは、どんなライブラリを使っているかなどを見ています。

さて、2017年も残すところ数週間となりました。本連載も6回目を迎えましたが、新年を迎える前にひとつイベントのお知らせがあります。12月22日から、私を含め全国のCPIエバンジェリストやウェブ業界の著名なゲストを迎えた「CPI 20周年サンクスキャラバン」を開催します。当社KDDIウェブコミュニケーションズが提供するレンタルサーバー「CPI」が、提供20週年を迎えたことを記念したイベントで、ウェブ制作に役立つ情報を盛りだくさんでお届けします。

第1回目の東京は、12月22日(金)に開催します。私は東京をはじめ、大阪、名古屋、福岡、青森、岡山と全国6か所まわりますので、当日会場でお会いできるのを楽しみにしています!

CPI20周年特設サイト

CPI20周年特設サイト

>>>「CPIエバンジェリストのお悩み相談室」の目次はこちら


[筆者プロフィール]
阿部 正幸(あべ まさゆき) | KDDIウェブコミュニケーションズ/エバンジェリスト
システム開発会社で大規模なシステム開発を経験後、Web制作会社でプログラマー兼ディレクターとして従事。その後、KDDIウェブコミュニケーションズに入社、レンタルサーバーCPIのプロダクトマネージャーに就任。ACE01、SmartReleaseをリリース後、現職の「エバンジェリスト」としてWeb制作に関する様々なイベントに登壇。Drupal(g.d.o Japan)日本コミュニティー、HTML5 funなどに所属し、OSSを世に広げる活動やWeb制作に関する情報を発信している。

●CPIフタッフブログ
 URL:http://shared-blog.kddi-web.com/

● CPI LINE@のご案内
http://shared-blog.kddi-web.com/other/215

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

5.18-5.24

MdN BOOKS|デザインの本

Pick upコンテンツ

現在