ようこそ、まだ見ぬ日本の美しさへ あなたが知っている日本は、この国のほんの一部でしかありません。 日本には47の都道府県があり、そこには四季を映し出す豊かな自然と、 長い歴史を誇る建造物、各地で育まれた個性的な文化が広がっています。 まだ見ぬ日本の美しさを届けるため、FIND/47は生まれました。 © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution4.0 International license. © FIND/47 Office. Some Rights Reserved.Except where otherwise noted, content on this

Webサイトのレイアウトの種類はたくさんありますが、定番のレイアウトはだいたい決まっています。昔から2カラム、固定サイドバー、固定ヘッダーなどがよく使われていて、最近は1カラムを採用するサイトが増えてきました。 そこで今回は、Webデザイナーがサイトのレイアウトを考える上で、最低限押さえておきたい代表的な6つのパターンについて、それぞれの特徴とメリット・デメリットを解説します。 目次 すっきり見せられる1カラムデザイン 回遊率を上げやすい2カラムデザイン 3カラムデザインなら情報量を増やせる 画像メインのサイトに！カード型デザイン 見せたいコンテンツが決まっているときは固定サイドバー 固定ヘッダーで直帰率を改善 まとめ すっきり見せられる1カラムデザイン 画像引用元：http://pas-pol.jp/ 1カラムはサイドバーのないレイアウトです。スマートフォンサイトではサイドバーを配置しに

2015年5月、スマートフォンによるGoogleの検索数がPCでの検索数を抜いたというニュースがGoogleの公式ブログで発表されました。昨今の私たちは多くの情報をスマートフォンで検索しています。その流れに伴って、現在は多くの企業がスマートフォン用に最適化されたWebサイトを持つようになりました。 我々Web制作者はこの流れの初頭、PCサイト制作で培ったノウハウを元に、手探り状態で制作していたのを記憶していますが、この数年の間で一定の制作ノウハウが蓄積されてきたように思います。 しかしデバイスが多様な進化を遂げる中で、スマートフォンサイトのUI作法も日々刻々と変化し続けています。私たちWeb制作者は一定のノウハウを使い回すことに固執せず、常に新しい動向を自分の目でキャッチして知識を刷新し、日々の業務にフィードバックさせる活動が大切です。 というわけで少々前置きが長くなりましたが、今回は昨今

CSSアニメーションを使って実装された、レスポンシブや省スペース用の検索フォーム、フル画面に表示させる検索フォームなど、デザインや実装のアイデアが面白い検索フォームを紹介します。

弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー

批評は聞くことから始まる デザインをはじめとしたクリエイティブプロセスにおいて意見交換は欠かせません。いちど自分の手から離すことで発見できることはたくさんあります。しかし「これはどうですか？」と見せるだけでは求めるフィードバックを得ることは難しいです。誰もが最初からデザインについて会話ができるわけではないので、デザインの批評（critique）の進め方に注意を払わなければいけません。 わざわざガイドラインまで作ってしまうと、かえって窮屈になってしまいます。構えて会話するより、平等にあれこれ話せるのが理想的です。そうした雰囲気をつくるために、デザインをみせるデザイナーだけが努力すれば良いというわけではありません。批評に参加するすべての方がちょっとした気遣いをすることで良し悪しを決める場から、ゴールに向かうための改善の場になります。 批評する側が気をつけること すぐリアクションしない。どのよう

Apple, Microsoftをはじめ、Sony, IBM, Intel, Adobe, Dell, FedExなど、有名ブランドのデザインガイドラインを紹介します。 スタバ、ケンタ、Heineken、NASA、LEGOなど、ちょっと珍しいガイドラインもあります。 LEGOのガイドラインは、かなりLEGOらしい出来映えです。

Webサイトの制作を行うWebディレクターの多くは、一回でクライアントに満足してもらえるデザインが出せないか、いつでも高いクオリティのデザインが出せないか、それもできる限り短い納期で…、と頭を悩ませているのではないでしょうか。 デザインというのは個人の感性が大きくかかわる部分であり、またオーダーもクライアントの言葉や「こんなイメージで」というサンプル程度といった曖昧なものになってしまいがちなため、「ハマるとなかなか抜け出せない」状態に陥ってしまうものです。 「厄介な案件を担当しちゃったな…」なんて、思わず愚痴をこぼしたくなる日もあるのではないでしょうか。 でもそれは、Webディレクターの指示を受けてデザインを制作するデザイナーにとっても同じこと。デザイナーにとってはWebディレクターがクライアントのような立ち位置にいるため、実はあなた自身がデザイナーから「厄介なクライアント」と思われてしま

※サイトのリニューアルや閉鎖などで見られなくなっている可能性があります P058　ナビゲーションメニュー Unheap Oleg Lyutov TriplAgent Wacom LRXD C-ROOTS Form Follows Function La Moulade 24 ways Tictail Inspiration Grid Punchcut Brit + Co. Master and Dynamic P’unk Avenue Treehouse Envato 96Elephants.org Google Ventures SitePoint RSR Grain & Mortar P059　ローディング画面 Agency Survival Kit vlog.it HughesLeahyKarlovic Your Tour Spell Up Legwork Studio CO3 Ma

ひと昔のサイトを見た時、直感的に「このサイト古いつくりだから、アクティブじゃない」なんて感じることはありませんか？ 近い将来、あなたのサイトもこのように思われてしまうかも知れません。サイトのデザインが古いことは、機会損失につながります。 あなたのサイトが少しでも長く愛されるサイトデザインにするために、本日は最新のウェブデザイン手法である「フラットデザイン」についてお伝えします。 ▼目次 1.フラットデザイン概要 2.フラットデザインのメリット 3.フラットデザインの考え方 －フォントの選定 －オブジェクトの作り方 －グリッドのマージンの取り方 4.背景に画像を敷く 5.フラットデザインなサイト事例 6.フラットデザインなスマホサイト事例 7.まとめ 1.フラットデザイン概要 近年、IOS7やwindows8のヴィジュアルに「フラットデザイン」というものが導入されています。歴史をたどると、ド

作成：2014/09/29 更新：2014/11/01 Webデザイン > Webデザインの流行りを知るために、トレンド感のある配色や洗練されたレイアウトをつくり上げるために、知っておきたいことや方法など。他に、Web制作において今後積極的に挑戦してみたいものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 配色 １．ネオンカラー ２．washed out ３．グラデーション ４．マテリアルデザイン 模様 ５．ジオメトリー 背景 ６．背景色を時間の経過で変化させる ７．スクロールで背景固定、コンテンツだけ動かす 一部に動きをつける ８．シネマグラフ ９．線画 (SVG) １０．グリッチ UI・他 １１．ゴーストボタン １２．プレースホルダー １３．ローディングエフェクト １４．pushState １５．ドロアー レイアウト １６．タイルレイアウ

デモページ Responsive（レスポンシブ） Adaptive（アダプティブ） Liquid（リキッド） Static（スタティック） Responsive（レスポンシブ） レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。 Liquidapsive: Responsive Adaptive（アダプティブ） アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト（環境・状況・目的など）に応じて表示するコンテンツ（レイアウト）

2014年7月30日におこなわれたADC MEETUPでのセッションのスライドです。 Photoshop CC 2014を使用することを想定した内容となっています。Read less

デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの

LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス

デザインをしつづけていると、たまに柔軟に考えられなかったり、自分のデザインに対して疑問を感じるときがありませんか？ そういうときは一度、初心にかえってデザインに関して考え方を見直したり、インスピレーションを刺激することも大切です。 また、デザイン思考を身につけるためにも、常日頃から考え続けることも重要です。 今回は、過去に話題になり、読むだけでデザインに関する「考え方」が深まる14個の記事をご紹介します。 デザインに対する考え方が変わる・深まる記事 これはウェブページです｡ ウェブデザインの本質は､言葉です｡ ウェブで一番強力な道具は､今も昔も言葉だということを、思い出させてもらいました。 ▷これはウェブページです｡ 選ばれるウェブデザインとは ９つの基本的なルールと感情に訴えるデザインについて詳しく書かれています。 サイトの使いやすさだけでなく「ユーザーがそのサイトにどんな感情を抱くか」