Theory

WEBデザインにおけるセオリーの定番はいくつかある。
規則・不規則、動線・導線、配色、利便性、アクセシビリティ考慮や、人間工学に基づく動作設計。
挙げるとキリが無いので、ぜひこの記事を書いた発端である「Webデザインセオリー Advent Calender 2015」にきっと有用な記事がこれからたくさん挙がるので乞うご期待！

僕個人として、セオリーと聞いて先ず一番に思ったのは

デザインツールや紙の上だけでデザインすると、どうしても抜けるところが出てくるので、やはりPCやスマフォ実機テストやプロトタイプテスト、出来るだけ本番に近いサーバ環境でのテストサイト構築がWEBデザインでも重要なのは変わらないところ。

気をつけたいポイント

OSやブラウザそのものが持っている動作を損なわないこととか。
PCだったら、スクロールや右クリック、マウス操作、ブラウザの戻るボタンとか。
外部サービスとの連携時、あるいは外部サイトへのジャンプの時、ユーザーがストレスになるような物になっていないか、とか。
色覚^*1に対してのアクセシビリティを考慮するのであれば、一度「色覚シュミレート^*2」をしてみると良いでしょう。

原理原則として、ユーザー側の利用環境を考慮してのデザインが前提としてのセオリーであり、環境を無視する場合は何かしら狙いを持って実装するべき、と考えます。
（横スクロールや1スクロール画面遷移とか、縦書きテキスト^*3とか、コンテンツや企画に対してアプローチ出来ている事で成り立つ仕様が理想）
単にトレンドを取り入れて敏感な人にリーチさせよう、っていうのでも良いとは思いますが。Three.js^*4とかWebGL駆使されると何か超越してる感じがするし。もちろんターゲットありきだけど

原理原則

先日、友人デザイナーと飲んでいた時に話していたのですが、原理原則ってとても大事で

例えば昔のインターネットって、回線を引いてLANを指して電話を気にしつつテレホーダイの時間になりピーギョロロロローと音を立て、デカいくせに見える範囲は狭いディスプレイでホイール式のマウスを使いエッチなアニメーションGifがすべて表示されるのをまだかまだかと待ち続け、無味乾燥で荒いテキストの掲示板でコミュニケーションを取り返事を確認するのに何度も更新したりするうちにメールが発展してポストペットが大流行。
電話で言えばもちろん固定電話で、好きな人の声を聞くのも一苦労で、待ち合わせはすっぽかされたらジ・エンド。ポケベルの登場で若い世代はようやく外でのコミュニケーションが取れるようになり、PHSでグッと距離が縮まり、更にバカでかいガラケーにピカピカ光るアンテナで目立ってたわけです。

私はちょうどそんな世代なのですが、おかげで
元々なぜそれが必要だったか、なぜその技術は生まれて、なぜそれは動いて、どういう仕組みなのか、といった根本的なところを肌で感じられました。
今そんな物は必要無い知識だ、と言われればそうなのかもしれませんが…
WEBデザインをする上で、「なぜそれが必要なのか」といった根本が重要で、
実装された物がなぜ必要か？と考えずに「最近流行っているから」と組まれている物も少なくはありません。
一見すると今っぽいデザインも、実際に使い勝手が悪くユーザーが寄り付かないケースもちらほら。
理由が分からないデザインを組んでも仕方ありませんよね。

ハンバーガー^*5がよく話しに挙がりますが、
確かにレスポンシブ組んでる時なんかだと、サイト構成上、ハンバーガー1つで処理するととても楽です。
しかし動線がそこしか確保されていないのであれば、常に1タップ余計に必要で、しかも他に動線が無い場合はタップしなければサイト構造が分からないなんてケースも。
これはハンバーガー導入時に「なぜ？」と考えていれば改善できたはずです。
例えば基本メニューは常時表示にし、補助的に全カテゴリ表示させるようにしたり、トップにはグロナビ以外にバナーやフッターメニュー等でしっかり動線を組んでいたり。
WEBサービスであればトップページのみで楽しめるケースもあるので副次的なコンテンツはハンバーガーでいいよね、という選択肢も有りですし、
ポータルサイトもトップにしっかりとメニューが並んでいればハンバーガーも補助的な役割になるのでストレスになりません。

何事も「なぜ？」と根本的なところを見つめなおすのが大事。
だからWEBデザインも、OSやブラウザをしっかり見てあげるのが、とても大事。

伝えたいコト・モノ

最後に（長いな…）
基本的にWEBサイトには伝えたいコトを持っているはずです。
先日のYATさんの記事^*6にもある視線誘導なんかもそうですが、
トップページを開いた時なんかに「なんのサイトなのか」「どんな魅力があるのか」等が一目で分かり、そしてそこに写真やキャッチが分かりやすく”入ってくる”配置がされている、それがWEBデザインの大きな目的として根本にあるコトじゃないでしょうか

僕のブログで伝えたいこと？
んー… ヒゲです

---

ということで、Tips等ではないですが
WEBデザインする上で、僕が考慮している（したい）セオリーでした。

*1「色弱」に関する記事
色弱のユーザーにもやさしいランディングページのデザイン-POSTD
http://postd.cc/designing-landingpages-for-color-blind-people/

*2「色覚シュミレート」に関する記事
自分のデザインをチェック！色覚シミュレーションの方法いろいろ-DesignColor
http://designcolor-web.com/2014/01/27/color-simulate/

*3「縦書き」に関するサイト
縦書きWebデザインアワード
http://tategaki.github.io/awards/

*4 Three.js
http://threejs.org/

*5「ハンバーガー」に関する記事
モバイルでのページ遷移を支援しよう（ハンバーガーメニューがあったとしても）-U-Site
http://u-site.jp/alertbox/support-mobile-navigation

*6「視線誘導」に関する記事
Webデザインを行うときの視線誘導がもたらす重要性とその考え方-YATのBLOG
http://wp.yat-net.com/?p=4571