area40

デザインを論理する。あなたの企業・商店・商品・サービスをブランディングするのに最適な解決策を構築します。目に見えるものだけでなく、その裏にあるものこそ大切にして。

Introduction

デザインとは?

  • 設計

    • 常に裏に数字が存在し、それぞれの分野でそれぞれの専門知識・技術が必要とされる。

    • 技術と密接に連動し、その機能を最大限に高める。それこそが良いデザインの条件。

グラフィックデザインとは?

解決策

  • 明快かつ効果的にメッセージを伝える。

  • 街中や建物内で的確な誘導をする。

  • ある商品の売り上げを伸ばす。

  • 企業や組織の活動内容を広く浸透させる。

  • パズルを解くような感覚で。

ウェブデザインとは?

未開拓の世界

  • 0と1の羅列の上に成り立つ多くの数字に支配。

  • 1pxがデザインを崩す可能性もある危うい世界。

  • プログラムとデザインの競演・相互作用。

  • ライブ&インタラクティブ。

  • コンテンツやデザインの変更が容易。

  • その可能性は無限大・未知数。

Keep the Balance between Designing and Programing.

デザインとプログラムの共存・両立、それが私の目指すところです。

What's area40?

『area40』という脳のとある箇所。耳の後ろ辺りにあるらしい。音楽を演奏したり、あるいは頭に浮かべただけでも活性化する箇所とか。シェークスピアの一節を呼んでも活動が活発になるとも。そこが実はプログラミング/コーディングしてる際も活性化するらしい。その話を聞いて即これこそうちの名称に相応しいのではと思い立ち、新ドメイン『area40.xyz』を取得、同時に屋号もこれに変え気持ちも新たに再スタートを切ることにしました。

更にarea40の解釈を広げ、イチローの守備範囲Area51やアメフトのイメージからスポーツデザイン風、墜落したUFOや宇宙人を極秘に匿ってるという噂もあったオリジナルのArea51から地球と宇宙のつながりというイメージ。ちょうど最初のロゴのデザイン中皆既月食だったということもありそういった神秘的なイメージ、人間の脳と地球と宇宙の繋がりのイメージなど色んなパターンに今後デザインの可能性を広げていきたいと考えてます。

Skills

習得技術

  • Languages

    言語

    • HTML
    • CSS
    • JavaScript
    • Python
    • PHP
  • Frameworks

    フレームワーク 

    • Django
    • React.js
    • WordPress
    • Laravel
    • Vue.js
  • Softwares

    ソフトウェア

    • Photoshop
    • Lightroom
    • Illustrator
    • Flash
    • InDesign
  • Editors

    エディター

    • VS Code
    • Atom
    • Vim
    • Notepad++
    • Bracket
  • Workflows

    開発環境

    • Webpack
    • Git
    • LAMP
    • Vagrant

Webdesign is an art and a science.

WEBデザインは芸術でもあり、また同時に数学的なものでもある。

No Skills || No Design

『技術の話?デザインはどこ?』っていう話も一理ありますけど、まずは技術の習得無しにデザインなんてあり得ないと思います。先日もとある著名な陶芸家の方が、最近の若い人は想像力は旺盛だけど技術がそれに伴っていないと嘆いてました。想像力を実現するための技術。

例えば車のデザインするなら空気抵抗などの力学もしらなければ、機能を伴った本当に良いデザインなど実現不可能なように、ウェブデザインの分野では裏のプログラム的なことにもある程度精通して無ければ良いデザインなど成し得ないということを経験から学びました。

Process

制作過程

仕事の進め方としては特に決まりごとはありません。それぞれのプロジェクトの性質、クライアント様のご要望に合わせて進めて参ります。既にアイディアが固まっていればそれを実現していきますし、こちらに任せるというのであれば、色々とアイディアを提供させて頂きます。

理想としては、クライアント様にも制作にできるだけ関わって頂き、お互い意見を可能な限りアイディアを出し合って理想の作品を作り上げていく、それがベストだと思います。例えば注文住宅であれば、足繁く現場に通い意見・要望を伝えたりするその感覚で。こちらも自分の考えを伝えたり、技術的なことを説明する機会に恵まれるわけです。

これはどんな分野でもそうだと思いますが、デザインとは美的感覚のみで成り立つのでは無く、その裏には数字であったり、技術的な制約であったり、機能性を重視したり、そういった側面を持ってます。建物で言えば構造上の問題であったり、バリアフリーなどの機能性であったりの存在があるように、ウェブデザインの分野にもそういうものが多々あります。

ウェブデザインにおけるそれらはなかなか理解しづらい面もあるし、建築などにおけるそれのようにまだまだ世間に広く浸透していません。そういったことをできるだけ丁寧に伝えて理解してもらう、それが私の使命だと思ってます。基本的に私が意見するのはそういった技術面が中心で、美的感覚の部分ではクライアント様の好み最優先です。

注文住宅としてのウェブデザイン

今どきネット上には安価や無料のウェブサイト制作ツールが溢れています。その中でWEB制作を外部に依頼する理由が果たしてあるでしょうか?あると断言したいです。よりカスタマイズされたデザインはあなたの個性をより表現し、より良い機能は信頼を高め、御社のブランディング力を高めます。さらに行き届いたケアやアドバイス、そしてアフターサービス。そういったことは注文住宅としてのウェブ制作でなければ絶対に提供できないものだと信じています。未だ一般の人にとっては技術的な敷居は高いものです。更にはプロの世界はどんどん進化してます。

注文住宅であればおおよその人はその違いや価値を理解し、『ああやっぱりこれはそのくらいの値段がするんだ。』と納得できることが多いと思います。ウェブデザインの場合、まだ歴史も浅いこともあってか、それらを理解してもらうのはなかなか難しいかもしれません。その対価に見合う、納得してもらえる質の高い作品・サービスを提供できるよう、情報収集や新たな技術習得など日夜努力を重ね、日々進化を目指しております。

Accessibility

WEBの本質

ウェブの本質は文字情報であるとそのことをまず忘れてはいけません。装飾は後から発展してきたものであって、そもそもWEBは文字情報であり、その事実はもちろん今も変わってません。ページ上の任意の場所で右クリックして『ソースを表示』させてみてください。これがこのページの本体。スクリーンリーダーが読むのもこれ。検索エンジンのロボット等が拾うのもこれなんです。

その際、ページの構造というものが重要になってきます。ちゃんと適切なタグが付けられてるかとかそういうことです。HTML5になってその種類は激増しました。論理的で意味を成す、Semanticな展開こそが目の不自由な人にも親切であり、そのサイトの評価を高めます。SEO対策の基本としてもまずそれを挙げさせて頂きます。

だからといって装飾を否定するものではもちろんありません。その事実を踏まえた上で、サイトを彩る装飾や動きは自由に加えていけば良いのです。但しその際は、異なる環境でどう表示されるか、そのことを念頭にデザインすべきでしょう。パソコン、スマフォ、タブレット等大きさの異なる様々なデバイス、あるいは異なる(特に古い)ブラウザーでも(最低限レイアウトが崩れること無しに)きちんと表示されることが重要となります。

目の見えない、本を読めない人々がウェブ、あるいはスクリーンリーダーの登場によってどれだけ恩恵を受けていることか、そして不親切な、構造がめちゃめちゃなサイトに迷い込んだ時にどれだけ不快な思いをするか、そのことを我々この仕事に従事するものはまず頭に入れておかなければならないと思います。(ちなみに、イギリスではSemanticでないサイトには罰金刑が課されることもあるそうです。)

このことに限らず、かつて生活したことのあるアメリカ等と比較しても、日本は障害者にあまり優しくない国だと私は感じています。東京オリンピックの誘致では『世界一正確な公共交通機関 』が売りでしたが、そのことの犠牲になってるものも多々あるし、その事実も世界に知らしめることになるでしょう。

せめてウェブの世界は、率先してそういう課題に取り組むべきかもしれません。大手企業を含む日本の多くのサイトでは未だ文字を画像で入れることがまかり通っていますが、これは不親切であると同時にサイトのランクも落としてしまいます。なぜならそうやって入れる文字はそのサイトにとって重要な文言が多いからです。そこはImage Replacementとかのテクを使わずに、Hタグを使った普通の文字にすべきでしょう。

ウェブで使える日本語のフォントは未だ限られてるし、明朝体を使いたい、縦書きで入れたいなどその願望も理解できるし、私もかつてはそういう手法を取り入れてた時期ありましたが、画像で文字を入れるのはロゴとか限られた箇所に限られるべきでしょう。

もちろん私も完璧ではありませんし、まだまだ修行中の身であります。装飾を優先させるがあまり余計なタグやクラスなどを入れてしまうこともあります。ただなるべくAccessiblityに配慮した、筋が通り親切なサイトを作るよう心がけてるつもりですし、そのことを敢えてこの場をお借りして伝えておきたいと思います。

WEBとプリント(印刷物)との違い。

技術の進歩により、WEBデザインの可能性も広まりした。例えば書体。特に英文フォントに関しては、その選択肢は大幅に広がっています。そして解像度、スムースさなども飛躍的に向上しました。ウェブデザインを印刷のそれと同じにすることも可能です。とはいえその性質上、違いは多々あるし、見た目だけを優先してウェブをプリントと同じようにしようとすると色々なものを失ってしまうことになり兼ねません。

どちらが良い悪いではなく、それぞれの良さがあり、それを最大限に引き出すデザインこそが良いデザインだと思います。例えばWEBであれば、動きを付けれるとか、双方向性とかその良さが多々あるでしょう。ライブ感覚で常に情報を更新できるのもその強みのひとつです。デザインの変更も後からいくらでも可能です。結果として費用を抑えることができるかもしれません。 その性質上、今後その存在をウェブに取って代わられる紙の媒体も多々出てくることでしょう。

とはいえ、やはり紙媒体に適わないものも多々あるし、印刷物は印刷物として今後益々その存在感を強める局面も出てくると思います。大事なのはその両方を巧みに駆使し相乗効果を発揮し、それぞれの強みを生かした的確なマーケティング、情報発信をすることなのではないでしょうか。私は主にウェブの方面で、そのお手伝いをさせて頂ければと考えております。

Graphic Design will Save the World right after Rock and Roll does.

ロックンロールに続いてグラフィックデザインが世界を救うだろう。

by David Carson

There must be no letting up in determination to produce vital work reflecting the spirit of times.

時代の精神を反映させた、活き活きとした仕事を生み出すという決意を鈍らせてはならない。

Doubt and Perturbation are good Antidotes Against the tendency to follow the line of leaset resistance.

疑いと不安は、易きに甘んじようとする心へのよき解毒剤だ。

by Emil Ruder

Do Not be Satisfied.

決して満足することなかれ。

by David Carson