2019年5月30日

Yahoo! JAPANトップで見るウェブデザインの歴史

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

デザイン特集5本目、最後の記事です。
こんにちは、ブランドマネジメント室デザイナーの上田絵理です。
サービスロゴやアイコンの作成や管理、けんさくとえんじんというキャラクターの担当をしています。

私が入社した1999年当時は社員が100人くらいで、全員の顔が覚えられるくらいだったのですが、入社してから20年たった今、社員数は6500人超*1...!  インターネット環境とデバイスの変化とともに進化してきたYahoo! JAPANのトップページを、デスクトップ風のビジュアルで表現してみました。移り変わるウェブデザインの歴史をお楽しみください。

1996年 アメリカのYahoo!のデザインを踏襲

1996年のまとめ画像

1996年4月に国内初の検索サイトYahoo! JAPANが誕生! 一般家庭でのインターネット環境はダイヤルアップ回線。当時私が担当となったYahoo!スポーツは、お客さまへ早く情報を伝えることが最優先され、「広告とHTMLソースの合計が50KB以内」という厳しいルールを守ってデザインしていました。広告とロゴを表示するくらいで精一杯!
十数人しかいないデザイナーのメインの仕事は、情報提供元から配信されてくるデータをどのようにわかりやすく見せるか、文字情報のレイアウトが主な仕事でした。ロゴやアイコンなど唯一のグラフィックデザイン要素も、アメリカのYahoo!で作られたものを流用していたため サービス名も英語でした。今見ると、フォント・色・アイコン全てがバラバラですね...。1996年のデスクトップ上に並べてしまいましたが、携帯用のYahoo!モバイルのサービスがリリースされたのは1999年でした。

2003年 コンテンツが増え、日本独自のデザインに

2003年のまとめ画像
1996年当時は天気とニュースしかなかった自社サービスが、7年後には40個に届く勢いで増えていきました。2001年にサービスを開始したYahoo! BBが低価格戦略を打ち出したこともあり、一般家庭でもブロードバンド回線が使われるようになり、インターネット普及率も一気に60%を超え*2ました。
ヤフー社内にデザイナーも増え、どんどん増えるサービスのアイコンを日本で作るようになりましたが、もともとアメリカでつくられたアイコンがあったので、それにテイストを合わせて追加していました。
ちょうどこのパソコン版トップページに掲載されている、Yahoo! JAPANロゴの下「こたつとみかんと猫」のイラストは、私が描いたものです。入社して初めてのクリスマス、トップページのロゴまわりにサンタのイラストが出ていたのですが、全然かわいくなくて腹がたち、当時の編集長の席まで行き「私に描かせてください!」と直談判しました。それがきっかけとなり、2000年から10年以上にわたりトップページのイラストを担当させていただきました(私が担当するまではアメリカで描かれたものが掲載されていたと記憶しています)。

2008年 グラデーションを使ったリッチなデザイン

2008年のまとめ画像
SoftBankからiPhone 3Gが発売される3週間ほど前、突然孫さんがヤフー本社へやって来て、「iPhone発売までにYahoo! JAPANの主要サービスの表示を最適化せよ!」との号令がかかり、対応に追われたことがとても印象に残っています(笑)
このころには、サービスロゴが日本語化され、すべて日本でデザインするようになっていました。当時の私の上司から、「サービスアイコンのクオリティーを上げるため特殊部隊を結成せよ」と声がかかり、全社のデザイナーの中からアイコンやイラストを描くのが得意なメンバーを10人ほど集め「イラストレーションチーム」を結成しました。
インターネット環境もリッチになり、グラデーションとドロップシャドウを使ったリッチな立体感のあるデザインが主流となっており、そのスタイルにあわせてアイコンを制作しました。このようにして、トップページ左側に主要サービスのアイコンが並ぶ、今となってはおなじみのレイアウトが完成しました。
CSSが本格導入、UIガイドラインやビジュアルガイドラインが制定され、急増したサービスでページ内の動きがバラバラにならないようにしていました。

2013年 フラットデザイン導入

2013年のまとめ画像
2012年、創業者である井上さんから前社長である宮坂さんへ社長のバトンが引き継がれました。社長に就任してすぐに宮坂さんから「アイコンをもっとカッコいいものにしてくれ!」と声がかかりました。2008年のアイコン作成時は、デザインよりも各サービスからの要望を優先して要素が増えて複雑になってしまったり、十数人でアイコンのテイストをあわせていくことが非常に難しく、全体として少しバラバラな仕上がりとなってしまったことが大変心残りでした。
その失敗を繰り返さないよう、ヘッドデザイナーを1人決めて詳細なルールと共通のカラーパレットをつくり、10人くらいのメンバーで手分けをして100個ちかくのアイコンを作成しました。サービス側から要素を増やしてほしい、色を調整してほしいなど、細かい要望も多々届きましたが、1つ1つのアイコンの最適化よりも、デザインを統一することを優先し、アイコン全体でクオリティーを上げたいという意図を懸命に伝え、理解してもらいました。
ヘッドデザイナーが少しでも違和感をもつアイコンは作り直し、ルールが足りなければ追加をし、極限までシンプルに削ぎ落とす努力を繰り返し、フラットデザインを採用したアイコンが完成しました。このアイコンは2019年現在も使われつづけています。

2019年 フラットデザインは継続、よりシンプルに

2019年のまとめ画像
2015年に「デザインの原則」が取り決められ、2016年には「Yahoo! JAPAN Visual Identity」が制定され、2017年にはYahoo! JAPANロゴに関する「ブランドガイドライン」の改定も行われました。アイコンだけでなく、ページやアプリのデザインもよりシンプルになり、Yahoo! JAPANらしさを重視するようになりました。

令和元年を迎えた今、みなさんがYahoo! JAPANをよく見ているのはスマホではないでしょうか? 2008年にスマホが発売され、10年以上たった今、多くの人の携帯がスマホになりました。Yahoo! JAPANでもこの5月、携帯電話版のサービスを終了しました。

2018年に前社長である宮坂さんから川邊さんへ社長のバトンが引き継がれてから「統合事業戦略」のもと、社員一丸となってサービスを開発・運用しています。
今後もインターネット環境やデバイス、社会情勢はどんどん変わっていくと思いますが、その流れを早く見極め、むしろ先取りし、仕掛けていきたいと思っています。みなさんにもっとヤフーを好きになっていただき、使い続けていただけるよう、これからもデザインの力で貢献して行きたいと思っています。
今後とも、Yahoo! JAPANをよろしくお願いいたします。

*1 2019年3月末時点
*2 ネット普及率は総務省 情報通信白書を参照
写真:アフロ

Yahoo! JAPAN Advent Calender 2019(外部リンク)を開催します。12月1日から25日まで毎日ブログを公開予定です。詳しくはリンク先をご確認ください。
Qiitaアカウントがない方はこちらのRSSもありますのでぜひ購読ください。

Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。

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