CocoonをSWELLに変更するとどうなる?

WEBデザイナーに求められること。

本ページはプロモーションが含まれています

先日、友人が私のことを「日本最古(?)のWEBデザイナー」と呼んでくれました。

通常、WEBデザイナーという職業からは様々なステップでキャリアアップしていきます。

「WEBデザイナー」を卒業していくわけですね。

ところが、私の場合、諸事情により今でも企画デザインからコーディングをこなしています。

そのようなことを続けていたら、本当に25年以上経ってしまいました。

褒め言葉か、けなし言葉か分かりませんが、「日本最古のWEBデザイナー」の二つ名を真に受けて、WEBデザインの状況変化を回想してみます。

WEBデザイナーのキャリアステップ、デザイントレンドやWEB技術の変化への対応方法等の参考にして欲しいと思います。

25年を記憶に頼るのは自信がないので、総務省の「第1部 特集 進化するデジタル経済とその先にあるSociety 5.0」の図表1-1-1-14「インターネットの普及の推移と主要なコミュニケーションサービスの開始時期」を頼りに、はじめてみます。

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

インターネットの黎明期

インターネットはクリントン政権の副大統領ゴア氏が構想した「情報スーパーハイウェイ構想」から生まれたということは有名ですね。

1993年に「情報スーパーハイウェイ構想」は発表されています。

参考:ISディジタル辞典-重要用語の基礎知識-第二版(情報スーパーハイウェイ)

総務省の「インターネットの普及の推移と主要なコミュニケーションサービスの開始時期」はパソコン通信の時期(1984年)からはじまっていますが、1994年の中頃からインターネット普及初期となっています。

私がはじめてインターネットのホームページを見たのは1995年ごろだと記憶しています。

その頃のインターネット環境はモデム接続で「ピー・ガー」といったうるさい音の後に、とにかくゆっくりとホームページが表示されていました。

画面には地球がクルクル回る「gifアニメーション」が表示されていて、ただのパソコンの画面に、どうやってアニメーションを表示できるのか驚いたのを覚えています。

「情報スーパーハイウェイ構想」から数年で、インターネットは一般化し、HTMLによるホームページが作られていました。

当時、私は「Macromedia Director」でCDコンテンツを作成する技術を習得するために一生懸命でした。

「Macromedia Director」はMacのCD-ROMオーサリングソフトウェアです。

プログラム言語は「LINGO」が搭載されていました。

まだ、ソフトウェア会社勤務で、将来は「マルチメディア」なのか「インターネット」なのか分からなかった時期でした。

この「Macromedia Director」の技術を持っていたことが、デザイン制作業界への転職の決め手になりました。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

WEB制作ツールの変遷

ソフトウェア企業から広告制作業界へ転職した私は実務でデザインを学んでいくことになりました。慣れない業界での仕事はかなりきつかったです。

広告デザインでのキャリアを1年で終え、グラフィックデザインを中心にした企画・デザイン事務所に転職したのが1996年のことです。

そして、最初のホームページ制作は1997年のでした。

現在でもホームページデータが残っています。(デザイン事務所の著作のため公開できません。)

この時のホームページを見てみるとテーブルレイアウトで横幅が620pxしかありません。

当時のデザインを想像していただきたいので、「Dark ages ob the Web」というサイトにリンクをはります。

当時のホームページと言えばこのようなデザインだったわけです。

ページの最下部には「gifアニメ」が配置されています。

私がはじめて見たサイトに使用されていた「地球の回転gif」もあります。

懐かしさを感じるデザインです。

インターネット黎明期のサイトデザインを見たところで、次からはWEBサイトがどのように作られていたのか振り返ってみましょう。

GoLive CyberStudio 3

私が最初につくったホームページは「GoLive CyberStudio 3」というツールで作られていました。

これは、たしか画像をテーブルレイアウトに組み直してくれるツールだったと思います。

ホームページはテーブルレイアウトで画像を切り出して作成していましたので、デザイン表現はグラフィックデザインと同じだったのです。

表現的にはほとんど制約がありませんでした。

Macromedia Flash

ホームページには、さらに強力なアニメーションツールが装備されていきます。

それが「Macromedia Flash」です。

illustratorやPhotoshopのデータを取り込んで、タイムラインでアニメーションさせたり「LINGO」に似たスクリプトで様々な動画制御が可能になりました。

2005年にAdobeに買収されるとさらに強力なWEBツールとなり、フルフラッシュのWEBサイトが増えていきました。

私もフルフラッシュサイトを幾つも制作しました。

WEB制作の楽しさがFlashによって頂点をむかえることになりました。

Macromedia Dreamweaver

「Macromedia」のもう一つの人気ツールが「Dreamweaver」です。

定番のWEBオーサリングツールとして、多くのユーザーを獲得しました。

このツールもまた、Adobeのツールとしてクリエイティブ・スイートに組み込まれることになりました。

htmlのブロックを部分的に共通化できる機能が重宝しました。

ツールの末路

これらのツールは常に制作を助けてくれましたが、現在は全て使用していません。

悲惨だったのがFlashです。

2007年FlashをサポートしないiPhoneが登場。2019年Google Chromeは「Adobe Flash Player」をデフォルトで無効化してしまいます。

これにより、完全にFlashは抹殺されてしまいました。

Action Scriptのノウハウ吸収に費やした多くの時間が水泡に帰しました。

参考:The Birth & Death of Flash

【PR】「Theme3」では、企業サイトのWordPressベーステーマに、100%GPLテーマ「 Arkhe 」をオススメしています。
「 Arkhe 」は高機能有料プラグイン「 Arkhe Pro Pack 」と連携することによって利便性とカスタマイズ性の両立が可能です。制作・マーケのプロの方に是非!

「Arkhe」の詳細を見る
「Arkhe Pro Pack」(サブスク版)を購入する

「Arkhe Pro Pack」には以下が含まれています。「Arkhe Blocks Pro」と「Arkhe Toolkit」には買い切り版もあります。
・Arkhe Blocks Pro
・Arkhe Toolkit
・Arkhe CSS Editor

WEB標準技術

iPhoneの登場によって、WEBはPCのものではなくなりました。

現在ではスマートフォンで利用されることが主流です。

そのため、WEBサイトはスマートフォンで表示されることをデフォルトとして考えるようになっています。

また、Flashの消滅によってオープン規格の採用がさらに加速していきました。

2010年代初頭、CSS3の導入が一般化すると、一気にレスポンシブデザインが標準となっていきます。

現在の標準技術は以下の3つとなっています。

WEB標準技術
  • HTML
  • CSS
  • JavaScript

変化する技術領域への対応

以上のように、移り変わりが激しいWEBという世界において、はたして「WEBデザイナー」という職業が継続的に成立しつづけるのかが、最近ではとても疑問に思えます。

「WEBデザイナー」を目指す場合、予測出来ない技術の変化に敏感であることが必要です。

実践で学び続けるか、あるいは、ノウハウ吸収に貪欲であるべきです。

Flashのような主要技術がひっくり返った実例もあります。

次は「JavaScript」がなくなってしまうかもしれません。

「WEBデザイナー」は、WEBの変化への対応が最重要なのです。

次は「WEBデザイナー」が、どのような職業なのか見ていきましょう。

WEBデザイナーという職業

WEBサイトを構築する場合、WEBデザイナーはどのように関わっていくのでしょうか?

すでに依頼があったことを前提にみていきましょう。

クライアントは企業としておきます。

STEP

ヒアリング

まず、お客さまの現状のヒアリングがスタートです。

WEBサイトの目的、事業の状況、競合他社等をご確認させていただきます。

STEP

3C分析(SWOT分析)

WEBサイト全体の企画構成を考える前に、客観的なお客さまの事業把握が必要になります。3C分析(顧客・競合・企業)による事業領域の分析は必須です。

また、SWOT分析の考え方を導入し、お客さまの市場における内部要因と外部要因を確認し、企画戦略に落とし込みます。

STEP

WEB全体構成の企画

現在のサイトは集客が前提条件です。

それを踏まえてWEBサイトを中心にした企画を作ります。

場合によってはお客さまの運用チームを作らないといけないかもしれません。
また、KGI、KSF、KPI各指標の策定が必要になるかもしれません。

STEP

ページ構成の企画・デザイン

ここからはサイト企画に沿って各ページ構成を設計していきます。

正確なデザインで仕様を確定させる場合もあれば、ワイヤーフレームを作成する場合もあります。

STEP

コーディング

CSS+HTML+JavaScriptでページを制作します。

STEP

テスト

お客さまの要望、目的をかなえているか、十分なテストを行いましょう。

この時点では、お客さま確認が重要です。

STEP

リリース

本番サーバーで運用を開始します。

簡単な流れは上記の様になるはずです。

私が「WEBデザイナー」を定義するとしたら、以上のような工程全てを実践できる人ということになります。

KGI、KSF、KPI各指標を策定した場合、制作後の運用は、さらにマクロ解析やミクロ解析を行わないといけないでしょう。

それら全てを統括する場合は、クリエイティブ・ディレクターあるいはコンサルとの共同作業が必要かもしれません。

なかなかに難しい仕事なのですが、デザイン・制作・コーディングだけなら、技術の取得と実践に限定することができます。

WEBデザイナーのスキル

WEBデザイナーはプログラムもデザインも両方できないといけないと思います。

私はシステム会社でPLIやコボル、Cを学んだ後、デザイン業界に転職していますので、運良くプログラミングもデザインもできます。

デザイン事務所で働き始めた頃、堀江貴文(ホリエモン)さんの起こした株式会社オン・ザ・エッジのインタビュー(WEB年鑑だったような)のなかでも、堀江貴文さんが「両方のスキルはあたりまえ」と言っていたと記憶しています。

1997年頃のことで、とても共感したおぼえがあります。

私がホームページを作り始めたころは、ホームページ制作のワークモデルが確立していませんでした。

そこで私はシステム開発で学んだシステムフロー設計の考え方を持ち込みました。

しかし、デザイン業界では理解を得られない部分もあったように思います。
最近ではマインドマップツールを使って企画整理をすることが好きです。

現在では分析やSNS運営等の資質も必要となっているので、かなり複雑です。

必要なことを全て吸収するのは、大変な努力が必要です。

実際には分業を想定して、プログラミング+デザインくらいに絞り込んだ方がよいと思います。

WEBデザイナーになるには

では「WEBデザイナーになりたい」と思ったとしたら、どうすればいいでしょうか?

25年前、私の場合は「Macromedia Director」の技術がありました。

それをきっかけにデザイン業界に転職がかないました。

今では、どうしたらいいでしょうか?

やはり、WEB標準技術の習得は必須だと思います。

そうでないと、職業に就くことが難しいでしょう。

WEBデザイナーになる方法
  • デザイン専門学校で学ぶ
  • オンラインスクールで学ぶ
  • WEB標準技術を独学し、ポートフォリオを作成する

ノーマルな考え方だとデザイン専門学校に入って学ぶことになるでしょう。

しかし、私は会社の採用面接を行った際に、応募者の作成したイラストを見せられたりして、少し嫌になったおぼえがあります。

オンラインスクールも同様です。

しかし、最近では転職を補償してくれたり、仕事まで紹介してくれるオンラインスクールもあるようなので、選択肢のひとつとして有力です。

一番、大変なのが独学です。

しかし、時間と生活する余裕があれば独学が最も差別化になる気がします。

どんな経路を選ぶにしてもポートフォリオを作ることを目指しましょう。

どんなサイトが作れるのか共有することが重要です。

最近では私の会社でもWEBデザイナーの方からのアプローチメールも増えてきました。

その際、ポートフォリオは参考になります。

WEBデザイナーのキャリアップ

努力の成果が認められて、デザイン事務所への就職がかなったり、インハウスデザイナーへの道が拓けたとします。

そこからは、どのようなキャリアアップが目指せるでしょうか?

私は以下のような道が拓けると考えています。

WEBデザイナーのキャリアアップ
  • WEBライター
  • WEBプランナー
  • WEBディレクター
  • WEBプロデューサー
  • WEBマーケター
  • WEBコンサルタント
  • グラフィックデザイナー
  • クリエイティブ・ディレクター
  • アートディレクター

「WEB」がついていない職種はWEBを離れてグラフィック系職種に移行した場合です。

現在ではあまり区別しないのかもしれません。

まとめ

このページでは「WEBデザイナー」について考えてみました。

「WEBデザイナー」を目指そうとする方の参考になればと思います。

最近ではWEBサイトを作る場合、集客を考えることが必須です。

また、DXの一部として、営業やサービス全体をシステム化することが求められています。

このようWEB環境が多様化する状況にあっては、作ることだけを考えていられない領域です。

少し前であればフリーランスでも十分やっていけたのですが、今後は分業されたプロダクションの中で仕事を続ける方がよい職種ではないかと思います。

身につけるべきことが、たくさんあるのでチャレンジする価値はあるでしょう。

【PR】「Theme3」では、ブログ用のWordPressテーマに、人気と高機能を誇る「 SWELL 」をオススメしています。

「SWELL」の特徴を見る
「SWELL」の購入はこちら

・ブロックエディター完全対応
・高速化機能を標準搭載
・100%GPL
・企業サイトの制作も可能
他、機能多数。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

fourteen − five =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。