こんにちは！新人森田です。
今日こそは暖かいんじゃないかと思って外に出ると期待を裏切られる毎日です。
むしろ雪が降りました。
最近くしゃみがよく出ますがこれはまだ花粉症ではないと信じてます。

今回はいつもと趣向を変えて、デザインの参考になるWebサイトを特集してみます。
暖かくなったら重いコートを脱いで、お出かけもはかどりますね。
お花見やいちご狩りと日本にも素敵スポットは沢山ありますが、せっかくならNY行っちゃう？！

というわけで特集内容はこちら！
（NY旅行にも役立つかもしれない）デザインの参考になるNYのホテルのWebサイト特集

ではいってみましょう。

堂々たる高級感！

ホテルから連想されるワードとして挙げられるもののひとつに「高級感」があります。
歴史ある一流ホテルにはそれにふさわしい雰囲気作りが必要です。

THE HIGHLINE HOTEL

http://www.thehighlinehotel.com/

これぞ正統派といえそうな佇まいです。
余計な装飾などは加えず、ナビゲーションはモノトーン。
丁寧に撮られた写真と、饒舌すぎないコンパクトにまとめられた情報から上質さを感じます。

THE NOMAD HOTEL

http://www.thenomadhotel.com/

こちらはまずページの黒枠に目がいきます。
フィルム写真を見ているかのような感覚がします。
コンテンツそれぞれにフルサイズの画像が使われているので、その世界観に引き込まれてしまいます。
また、米仏伊独日の言語にローカライズされていてるのも嬉しい。

フォント選びが素敵！

「高級感」といえばかっちりとしたセリフフォントを想像しがちですが、それだけではスタイリッシュとはいえません。
上品かつオシャレに演出されたサイトを見たら旅行したい衝動が一層強まります。

WYTHE HOTEL

http://wythehotel.com/

今回紹介した中で唯一きちんとレスポンシブしていたサイトでした。
トップページを見るとカジュアルめな印象を受けますが、本文にはセリフ体が使われていてあくまで見出しの役割のようです。
メリハリがあって好きなテイストです。
提携している（？）レストランのページもオシャレ。

THOMPSON HOTELS

http://www.thompsonhotels.com/

左上に予約ボックスが固定されていながらも、ページ全面を使ったレイアウトにはスタイリッシュとしか言いようがありません。
予約ボックスの横のナビゲーションが実はパンくずみたいな機能も果たしていてシビれました。
各要素のポジションが%で定義されていたので、ある程度の画面サイズの変化には耐えられそうでした。

REFINERY Hotel

http://www.refineryhotelnewyork.com/

今までのサイトとは違って、ギャラリーサイトみたいな、雑誌を読んでいるみたいなレイアウトです。
黒背景に写真の色が際立っています。
全体の雰囲気に合わせた手書き風フォントがかっこよかったり、でもどこか親しみやすい感じがしたり。

リゾート感あふれてる！

異国への旅はまるで非現実の世界に来たかのようです。
あふれるリゾート感もまた、もうここ行くしかないわって思っちゃう理由のひとつです。

THE Jade Hotel

http://www.thejadenyc.com/

indexページと各コンテンツページの見せ方に差があって分かりやすいです。
随所に使われている花モチーフのパターンが全体の雰囲気を引き立たせてくれています。
差し色が赤だったりと色使いが絶妙。

THE JAMES HOTELS

http://www.jameshotels.com/

見るからに開放感あふれちゃってます。
こういう広々のびのびとした空間の使い方は海外ならではな感じ。
NYのホテルっていうテーマなのにマイアミのビーチに目がいきまくってしまいます。
これはあれですね、旅行業界におけるシズルというか。今すぐ旅立ちたい！

まとめ

いかがだったでしょうか。
コンパクトかつ使いやすいナビゲーション・迷わないUI設計・フルスクリーンでスライドする写真などなどスタイリッシュさ満載で、さすがWeb先進国という感じでした。
何よりやっぱり毎回思うけど海外の写真とか英語はずるいです。
でも日本にも日本の良さがあって、日本という文化圏に合わせた、使いやすくスてタイリッシュなWebサイトってきっとあるはず。
今回紹介したようなWebサイトに刺激とエッセンスを貰いつつ、どうやったらそれが実現出来るのかを日々模索します。押忍！

こんにちは！新人森田です。
１月８日で株式会社ハレノヒは一周年を迎えました。入社のタイミングもあって、忘年会（歓迎会）・年明け・一周年と、最近お祝い続きです。このハレノヒパワーで今日も張り切っていきたいと思います。では師匠、お題をよろしくお願いします！

[山形師匠]
Webデザインが紙と大きく違うところは、紙は情報を受動的に ”見る・読む” のに対し、Webは ”操作する” という動作が加わります。そして操作するためのパーツのことをUI（ユーザーインターフェース）と呼びます。定番はもちろん最新UIの種類や応用方法にアンテナを張っておきましょう。

[森田]
最近Web制作関連の情報を読んでいると「UI」ってワードをよく見かけて、重要そうだなーと思ってました。ストレスなくページを見られるのはしっかりとしたUIがあるからなんですね。どんなものがあるか調べてきます！

Dribbble

世界のデザイナー達が作品などを投稿するSNSです。
今まで日本のサイトばかり見ていた私は、かっこいい作品の数々に目からウロコ。色んな国のセンスにリアルタイムで触れられるのは本当にインターネットならではだと思うので、これからものすごくお世話になること間違いなし。

Behance

クリエイター向けポートフォリオサービスです。
めちゃめちゃレベルが高くて、良い刺激にも指針にもなってくれます。早くこの領域に近づきたくてうずうずします。

素晴らしいUIを沢山見ることができて満足していたら、師匠からUIに関する情報を発信しているブログを教えていただきました。

MEMOPATCH

 UI制作を専門とする会社が運営するブログです。UIに関する様々な角度からの記事が盛りだくさんで参考になります。

 coliss

Webサイト制作に関するあらゆる情報が豊富に紹介されているブログです。Webは表現だけでなく幅広い知識が必要なんですね。

Hail2u.net

Photoshopで作るだけでなく、実際にWebページに組み込むコーディングも含めてUIです。こちらはフロント寄りの情報を取り扱っているブログです。

MOONGIFT

プログラムのオープンソースを紹介しているブログです。まだ技術的なことまで手が回りませんが、こういったソースも理解できるようになりたいです。

一言にUIといっても、見た目だけじゃなく色んな側面を持っていることがよく分かりました。こういうブログを毎日チェックして勉強しなければ。
次は、実際に使用されているUIはどんなものなのか、ちょっと見てみたいと思います。

Windows Phone

現在のフラットデザインの先駆けといえるWindows Phoneです。Windows Phone 7の発表が2010年ということをふまえると、実は結構前からフラットデザインのUIって使用されていたんですね。

Google

2013年春にGoogleのサービスもフラットデザインになりました。
こういうアイコンって、無性に沢山並べてずっと眺めてたくなります。ちなみに森田は最近携帯をNexus5にしたばかりです。

iOS7

そして2013年6月、フラットデザインを一気に広めたiOS7。
すぐ目に入ってくるし、きれいだしかわいい！やっぱりApple大好きです（iPhoneじゃないけど）。

有名どころを挙げてみましたが、そのブランドのカラーを出しつつ世界中の人々に快適に使われているって凄いことだなと改めて思いました。

言葉を使えば説明はすぐ伝わるけど、それだと長かったり重たかったりする。言葉抜きでユーザーに機能を説明したり、パッと見の美しさもあったりと、UIがWebデザインする上でどういう風に重要かということが前よりも分かった気がします。
流行も反映されやすいし、もっと周囲に目を光らせなければ！と、今回はこの辺りで修行を終えたいと思います。デザインに入るまでの道のりは長いです。押忍！