Flipsblog.jpサイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト - クックパッド開発者ブログ
クックパッド ダイエット事業室の田中です。昨年５月からスタートした「クックパッド ダイエット」にリリース当初から携わり、デザインやダイエットニュースの編集を担当しています。 現在クックパッドダイエットのサイトは月間1000万ページビューを超え、「ダイエットといえば『クックパッド ダイエット』」と言われるような世界を目指して、日々、運用・改善に取り組んでいます。 今回紹介するのは、クックパッドダイエットのUIをデザインする時の「UIの言葉選び」の具体的なチェックリストです。 最高のレイアウトでも言葉がイマイチだと台無しに みなさんは、UIの中の「文言（言葉）」をどのようなプロセスで決定していますか？ UIのレイアウトや遷移の方法について熟考する姿勢を持っている方は多いと思うのですが、文言の検証方法については確固たる視点を持っていない方もいらっしゃるのではないかと思います。 UIで王道のレイア
デザインは理屈で学べる！ エンジニア向けデザインメンター業が求められる理由について聞いた | HRナビ by リクルート
アイデアは面白いのに、どうもダサかったり、UIがわかりにくかったりするWebサービスに出会ったことはないだろうか。 それはもしかすると、デザインを知らないエンジニアが、ふわっとした感覚と印象で作っているからなのかもしれない。そんなエンジニアでも、デザインのセンスを身につけることはできるのだろうか？ プログラマー向けにデザインを教える“デザインメンター”赤塚妙子さんに話を聞いた。 プログラミングを学んだデザイナーが始めた“デザインメンター業“ 今年の1月から“デザインメンター業”を始めたフリーランス デザイナーの赤塚妙子さん。美大を卒業後、デザイン事務所に就職。その後、Webの世界へ足を踏み入れ、今ではRuby on Railsの開発に参加するまでになった。 「自分がプログラミングを覚える中で、デザイナーとプログラマーが歩み寄る感じが面白くって。デザイナーがプログラミングを覚えることはあるけ
Jリーグはスマホで見づらいサイトが多いなという日頃の印象を確認するため、淡々とスクショを撮ってみた件。 : スポーツ見るもの語る者〜フモフモコラム
Jリーグはスマホで見づらいサイトが多いなという日頃の印象を確認するため、淡々とスクショを撮ってみた件。 Tweet Share on Tumblr カテゴリ:サッカー 2014年09月02日12:57 字が小さくて読めぬというジジイへの入り口！ 今日は前々から気になっていたことについてです。僕は最近スマホをいじることしか出来ない人間となっています。朝起きれば枕元のスマホをいじり、会社に行けばトイレでコソコソとスマホをいじり、歩いているときもスマホをいじり、家に帰ったらテレビを見ながらスマホをいじる。せがれをいじるかスマホをいじるか、その二択の生活です。 そんなスマホ生活の中で、時折感じていたことがあります。それは「Jリーグ情報はスマホで読みづらい」ということ。別にJリーグの話だけを調べているわけではないのですが、バズっている話題についてウェブサイトを見に行ったとき、「読みづら！」「小っさ！
スマホサイトのEFO（フォーム最適化）で爆発的成果を出すための５原則 | LPO研究所
LPO研究所所長の鎌田です。 スマホサイトを用意するのがもはや当たり前になりつつある昨今ですが、スマートフォン対応を急ぐあまり、問合せフォームのユーザビリティがないがしろになってしまっているサイトをよく見かけます。 スマホユーザーの環境は、PCユーザーに比べてあらゆる点でシビアです。いい加減なスマホ対応をしただけでは、そうそうコンバージョンのアップにはつながりません。 下記の事例をご覧ください。 これは、あるブライダル系サービスのPC向け問合せフォームをスマホ最適化したところ、スマートフォンからのコンバージョン率が３倍以上になった事例です。このように、スマホユーザー向けに問合せフォームを最適化するだけでも、コンバージョン率はしっかり上がるのです。 今回は、弊社でスマホ向けフォーム最適化を行う際にいつも心がけている「５つの原則」について、具体例を交えてご紹介します。あなたのスマホ向けフォーム
Webページやアプリ、企画書や提案書に使える500種類以上のアイテムが揃ったアイコン素材 -Hawcons
500種類以上のアイテムそれぞれにソリッドとベタ塗りが用意されている高品質な無料のアイコン素材を紹介します。 商用利用も無料で、クレジット表記の必要がないのは使いやすいですね。 ソリッドとベタ塗りのアイコン アイコンのフォーマットも豊富に用意されています。 .png (すぐ使う用、カラーはグレー・ブルー・ブラック) .svg .eps .pdf Webフォント (.eot, .woff, .ttf, .svg) .sketch (Sketch用) 利用にあたっては個人でも商用でも無料で、クレジットの表記は必要無し、とのことです。ただし、販売や再配布は禁止です。 詳しくはダウンロードファイルの「Read Me.md」をご覧ください。 アイコンは6種類のカテゴリに分けられており、それぞれ豊富なアイテムが揃っています。
年間300億。Webユーザビリティ３つの間違い・落とし穴
「ユーザビリティを意識することが大切！」って言われても、何となく意味は分かるけど具体的にどうすれば良いの……と悩んでいる方も多いのではないでしょうか？ ユーザビリティとは、「単なる使いやすさ」のことではありません。特にWebにおいては売上や成果などビジネスを左右する重要な概念です。しかし、多くの人がユーザビリティについて間違った認識を持っているために、みすみす売上や成果を逃しているケースをよく目にします。 ユーザビリティを正しく理解するポイントは、特定のユーザの行動、心理、目的に焦点を当てることです。 本日は、よくある「間違い・落とし穴」を例に出しながら、売上改善に直結する「正しい」ユーザビリティの考え方をご紹介します。ぜひ皆さんもユーザビリティの理解を深め、Webサイトの改良に役立ててください！ 【事例】１つのボタンを変えただけで、年間300億の売上増！売上に直結するユーザビリティとは、
レスポンシブWebデザインのメリットデメリットを探る | コラム・研究会 - 株式会社マイクロウェーブ｜Webコンサルティング
2012年、Webの新たなトレンドとして注目された手法の一つに「レスポンシブWebデザイン」が挙げられると思います。 2010年に誕生して以降、知名度としては業界に広く一般的になりつつあるこの手法、実際に多くの企業様からもこの手法を加味したWebサイトの構築を検討したいとご相談いただくことが増えています。 本コラムでは、トレンドになりつつあるこの手法について、キーワードとして聞いた事はあり興味もあるが、実際に何が有益で自社に置き換えた際にメリットが出るものなのかどうか釈然としない・・といった方向けに、比較的分かり易くメリットデメリットをお伝えできればと思います。 レスポンシブWebデザインとは そもそも、レスポンシブWebデザインとは何か？ 昨今PC、スマートフォン、タブレットPC、はたまたその他サイネージなど数多くのデバイスが登場している事を背景に、端末毎に合わせたページを作成するのでは
良いフォームの条件と、入力フォーム最適化（EFO）に関する 4つの基本＋2つの本質 | 初代編集長ブログ―安田英久
今日は、「良いフォームとはどんなものか」を考え、コンバージョン率をアップさせる入力フォーム最適化（EFO）の基本を紹介します。問い合わせフォームや申し込みフォームなどを改善するヒントにしてください。 良いフォームとはどんなものかEFOを考える前に、まず「良いフォーム」というのは、どういうものかを考えてみましょう。企業側から見ると、良いフォームとは次のようなものではないでしょうか。 申し込み数（フォーム入力完了数）が多いターゲットに合った顧客層の申し込み数が多いターゲットでない顧客層の申し込み数が少ない問い合わせ（「どうすればいいんですか？」などのサポート的なもの）が少ないまぁ、フォームの話題なので上記の「数が多い」というのは「率が高い」ということなのですが（訪問者数を増やせば、数は増やせるので）、ここは、わかりやすさのために「数が多い」としています。 入力フォーム最適化（EFO）の4つの基
ゆーすけべーが伝授！人気Webデザインの作り方｜【Tech総研】
Webデザインを苦手とするプログラマも多いけれど、「覚えたい」という人も多いはず。そんなエンジニアは必見です。Perlギークのゆーすけべーさんに楽で簡単な「コツ」を聞きました。内緒（？）で教えちゃいましょう。 今年11月から「Japan Perl Association」の新理事と、YAPC運営委員会の委員長に就任した、Perlハッカーの和田裕介さん。というより、ゆーすけべーさん。「ボケて」や「君のラジオ」の開発者として知られる和田さんは、実はWebデザインにもこだわりを持つ。 「僕は開発者なので、Webデザインは本職ではありません。ただ、Webを作るときに色やフォントはシビアに見ていますね。とはいえ、基本的に面倒くさがりです（笑）」 色の設計に便利なツールとして和田さんオススメなのが「ColorSchemer Studio 2」。有償のMac用アプリで、実際に使っているという。 「ひとつ
8割以上の人、スマートフォン専用サイトの必要性を感じていないことが判明
有限会社いろはの代表取締役兼経営コンサルタント・竹内謙礼が、「ネットで売れるもの売れないもの 増補改訂版」（日本経済新聞出版社）を8月2日に発売するにあたり、楽天リサーチを活用して、スマートフォンユーザー100名に対して、アンケート調査を行った。 同調査では、スマートフォンで一般的に表示される「PCサイト」と、スマートフォンの画面の大きさに合わせて表示される「スマートフォン専用サイト」と、どちらが活用されているのかを中心に尋ねた。 まず、「スマートフォン専用サイト」と「PCサイト」、どちらが使いやすいか質問したところ、「スマートフォン専用サイト」と回答した人が39％だったのに対して、「PCサイト」と回答した人が45％と、6ポイント上回る結果となった。「特に意識はしていない」と回答した“どっちでもいい派”の人が16％いることから、6割以上の人がスマートフォン専用サイトに対して利便性を感じてい
jQueryのプラグインを大量に収集している・「Unheap」 - かちびと.net
UnheapはjQueryのプラグインを大量の収集、紹介しているWebサイトです。かなり細かくカテゴライズされているので探しやすい印象でした。社内向けに作ったリソースサイトらしいです。 Unheap
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
これくらいはやってほしいWebデザイン
PHPカンファレンス2012@東京 ( http://www.ustream.tv/recorded/25414614 )
これからWebサイトの制作をしたいけど、何から勉強したらいいの？っていう人のためのガイド
以前から、「Webサイトを制作をしたいけど、何から勉強したらいいの？」という質問をよく頂いていました。私が Web制作を勉強し始めた頃に比べると、最近はたくさん情報がありすぎて何から始めればいいのか迷う人も多いみたい …。なので今回は、Webサイトを作るのに必要な知識を簡単にまとめてみました。 最近本だなを整理していて、もう読まなくなった Web制作系の本を片付けたりしてみました。ずーっと前、Webサイトってどうやって作るんだろうってところから始まって、用語もよく分からないまま色んな本を読んだりした頃を思い出します …。 Webサイトは HTML っていうものでできていて、CSS っていうもので、見た目をデザインしていくのかぁ … っていうことさえ、あの頃の私にとっては新しい発見だったなぁ … なんて思ったりしました。 最近では HTML5 とか CSS3 とか、私が勉強し出した頃に比べる
チェックボックスやinput要素などのフォーム周りのユーザビリティを少しだけ向上できる地味に便利なjQueryコードいくつか - かちびと.net
フォームで利用するjQueryのスニペット コードをいくつか。どれも既出だと思う のでおさらいという事で。とはいえ、所詮 はスニペットですので実際に導入する際 は動作をしっかりと検証する事を強く 推奨します。 フォーム周りのjQueryスニペットです。自分用のメモも兼ねて。 フォーム関係は色々面倒なので参考にならない事もあるかと思います。「ふーん」程度にご覧頂くと丁度いいと思います。 Placeholder属性を、非対応ブラウザでは表示/非表示に 便利なHTML5のPlaceholder属性をオールドブラウザでは表示/非表示として対応します。 if(!$.support.placeholder) { var active = document.activeElement; $(':text').focus(function () { if ($(this).attr('placeholde
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド
sp-web.jp
cmmntr.com
吹き出し素材専門サイト「フキダシデザイン」