1. Home
  2. Redefine Design

Redefine Design

“Ingres is said to have created an artistic order out of rest; I should like to create an order from feeling and, going still further, from motion.” - PAUL KLEE -
“We should like to create an order from feeling and, going still further, from design & emotion.” - ADWAYS | CREATIVE -
01

序

Creative Works
[ Creative Works ] は、今までわたしたちADWAYS CREATIVE TEAMが携わらせていただいた仕事の足跡です （あらゆる仕事の部分的複合体）

このサイトを作成するにあたり、今まで感覚的に使用していた
[ ADWAYS＝日本的なデザイン ] という要素を整理し、再定義しようと考えました。

なぜこのサイトデザインにしたかの意図を伝え、その上でご覧いただいた皆さまに何か残るものがあれば、幸いです （第四次延長のなかで主張します）
Redefine design

ADWAYSの本社オフィスに日本的なデザインを取り入た理由

デザインのコンセプトは会社の理念でもある [ 人儲け ] につながる [ 義理と人情 ] です。また、海外に事業を展開するにあたり、日本の企業であることを分かりやすく伝え、喜んでいただけるよう、おもてなしの気持ちが込められています。

02

破

Redefine Design

これからの方向性、ミッションを踏まえたサイト全体のトーン & マナーの定義

デザインと言う言葉を大きく捉え「デザインの力で課題解決に取り組む」がわたしたちのミッションです。今後、わたしたちが提供したい価値や目指す方向性を踏まえ、このサイト、ADWAYS CREATIVEでは洗練され落ち着いたトーン & マナーを定義しました。

日本的なデザイン要素の再定義

普段、わたしたちが良く利用している日本的なデザインを整理し、その後、デザインの展開がしやすいよう要素を追加しました。オフィスエントランスやIR資料に利用されている富嶽三十六景は控えめに踏襲。北斎漫画に登場する職人たち = クリエイター集団を暗喩した絵を象徴的なイメージに。デザイン性が非常に高く現代のデザイナーにも受け継がれる琳派の作品を追加。このサイトで利用する日本的なデザイン要素の取捨選択基準は日本的なデザインの文脈に出来るだけ沿っていることです。
Brainstorming

Brainstorming

サイトの目的や、ターゲットユーザーを考え、それに合ったデザインの方向性やサイトの構成を決定しました。

Brand Image

Brand Image [ Brand Personality ]

今後、わたしたちが提供したい価値や目指す方向性を考え、サイトのブランドイメージを作成。サイト全体のトーン & マナーに活かしました。

03

急

ReDesign
破で考えた全体の構想から具体的なデザイン要素を決定しました。

Logo ｜ ADWAYS + Futura

ADWAYS｜CREATIVE

Logotype ｜ #000 / C40 M40 Y40 K100
Border ｜ #333 / C0 M0 Y0 K91

ADWAYS｜CREATIVE

Logotype ｜ #FFF / C0 M0 Y0 K0
Border ｜ #F1F1F1 / C0 M0 Y0 K9

ADWAYSロゴと。ADWAYSのロゴタイプを踏襲し、Typefaceの似たFuturaから作成。変化と新しい様式の付与。Aから出でたVはAより鋭く、ブレイクスルーを表しています。

ADWAYS CREATIVE LOGO GUIDELINE

ADWAYS CREATIVE LOGO GUIDELINE [ PDF：760KB ]

Logoの試作・工程

Ver01 Futura Bold

ADWAYS｜CREATIVE

Ver02 Futura Medium [ 太さ変更 ]

ADWAYS｜CREATIVE

Ver03 Futura Bold [ R ] + Futura Medium [ 太さ変更 ]

ADWAYS｜CREATIVE
Ver03のFutura Bold [ Rのみ ] とFutura MediumのFont Weightを変更した文字、ADWAYSロゴのAの文字を合わせ、E、Tの文字幅を調整。

Symbol Mark

Construction Grid

Symbol

#000 / C40 M40 Y40 K100

Symbol

#FFF / C0 M0 Y0 K0

Symbol
favicon、スマートフォンのホーム画面アイコン用に作成。

Design Element

Image ｜ 葛飾北斎

葛飾北斎
内外共に、多くの方がADWAYSと聞くと思い浮かべる象徴的な画家。
[ 富嶽三十六景 ｜ 神奈川沖浪裏 ]

Image ｜ 琳派

琳派
俵屋宗達から田中一光まで。デザインの展開を考え採用しました。
[ 尾形光琳 ｜ 紅白梅図屏風 ]　[ 鈴木其一 ｜ 朝顔図屏風 ]　[ 神坂雪佳 ｜ 八つ橋 ]

和文 ｜ 游明朝体、游ゴシック体

游明朝体

人儲け

游ゴシック体

人儲け

日本的で洗練され落ち着いた印象与えるよう、見出し等、大きな文字は明朝体に。明朝・ゴシック体共に、様々な環境での差異をなくすため游明朝を使用、和欧混植の見出しはQuattrocentoとの差が大きかったため游明朝体のみを指定しました。

欧文 ｜ Quattrocento、Raleway

Quattrocento

Beyond Everything Internet

Raleway

Beyond Everything Internet

見出し等、大きな文字はSerif。Serif、Sans-Serif共に、様々な環境での差異をなくすためGoogle fontを指定しました。
* Quattrocento ｜ イタリア語でルネサンス初期・400という数字を表す ／ ルネサンス：再生、400：琳派 [ 400年 ]

Color ｜ Achromatic Color + Adways Corporate Color

Primary Color

Primary Color [ #000 ]

見出し、本文

Gray Scale

Gray Scale [ #333 - #FAFAFA ]

明度の低い色はWeb Safe Colorで指定 [ #333 #666 #999 #CCC ]

Accent Color

Accent Color [ #DE3838 ]

Adways Corporate Color [ CTAボタン等 ]

Complementary Accent Color

Complementary Accent Color [ #48AC9B ]

花緑青五割 + 青緑五割 [ 現状は画像内のみの使用 ]

主色

Ivory [ #E9E4D4 ]

灰白色 [ 現状は画像内のみの使用 ]

ベースはBlack White Grayの無彩色、Accent ColorはADWAYS Corporate Colorを指定しました。
鈴木其一 朝顔図屏風
04

下

Playfulness in Design

やたら横文字を使ったりする

日本的なデザインを意識させる言葉をしつこいぐらいに語って来ましたが、そもそもマクラ [ 冒頭 ] がパウル・クレーの著書から引用した英文なので最初から破綻している感がありました。

開き直りサイトではやたら横文字を使おうと思っていますが、どうか目をつぶっていただければ。
おあとがよろしいようです。
※やたら横文字を使ったりするの元ネタを知りたい方はこっそり検索してください。
※ 序破急の構成にマクラ [ 冒頭のクレーの引用文 ] から04サゲ [ 下 ]でオチです。
神坂雪佳 八つ橋