【まとめ】デザインが素敵！使い易さに特化してる！的なWebサイト１０選 - Love＆Peace
はじめに 私が直感で”素敵だなぁ”と思ったWebサイトをご紹介します。日々様々な情報を得る為にホームページを見に行く訳ですが、その中でも見た目のデザインや使いやすさに特化したWebページを自分なりにまとめてみました。 目次 はじめに 横浜中華街オフィシャルサイト 転職サイトGreen（グリーン） ワーナーミュージック・ジャパン 北欧、暮らしの道具箱 通販ベルメゾン ミニラボ（minilabo） 箱庭 haconiwa ドラおじさんの薬剤師・転職相談室 feve casa オンライン住宅雑誌 ZERO-CUBE MALIBU×カリフォルニア工務店のコラボハウス 写真・イラスト・動画などの素材屋「１２３R」 さいごに 横浜中華街オフィシャルサイト www.chinatown.or.jp 横浜中華街で「美味しい飲食店はないかなー？」と探していた時に出会ったのがこちらのWebサイトです。全体の雰囲
コンテンツを見直すための魔法のシートが必要な理由
マーケティングとデザインの共通点 2015年6月27日大阪 Re:Creator’s Kansai 主催のイベント「基礎からきちんとマーケティング」に登壇しました。デザイナーとして働いているのでマーケティングは畑違いのように見えますが、以前からマーケティングを扱った記事をたくさん書いています。カスタマージャーニーマップのようなマーケティングの手法がデザインプロセスの一部として採用されていたり、デザイン思考がマーケティングに取り込まれているなど、共通するところが幾つかあります。 例えば UX を学んでいるうちに行動経済学に興味を持つ方もいるでしょう。行動経済学はデザインにも取り込める興味深い学問ですが、マーケッティングを深く知る上でも役立ちます。デザインとマーケティング両方に興味をもつことは、デザイナーとしてごく自然のことではないでしょうか。人のこと、市場のこと、社会のことを知らないとデザイ
『「AWA」のデザインはどのようにして作られたのか。』
こんにちは。 AWAでアートディレクション／デザイン／ブランディングを担当しているムロハシと申します。 今回はAWAのUIデザイン、インタラクションがどのようにしてつくられたのか、 先日行った「 メディアプロデューサー養成講座」の講義内容をベースに、 簡単ではありますが書いていきたいと思います。 「AWA」とは？ AWAとは、ひとことで言うと 「登録なしですぐに音楽が聴ける定額制の音楽配信アプリ」です。 サービスの特徴として第一にあげられるのは、 ・好きなアーティストを聴くだけでなく「プレイリスト」を軸に、自分の好みにあった音楽が「リコメンド」されること リコメンドを通じて「昔好きだったあの曲」や「まだ知らなかったけど好きな曲」を一人ひとりにパーソナライズしてお届けしています。 そのほかの詳しい説明は プレスリリースをご覧いただければと思います。 インタラクションモックの重要性 AWAの初
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
デザインの原理原則がわかる8つの記事 | creive
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
JavaScriptで作られた、見たことないUIデザインのWebサイト
株式会社サイゾー（Cyzo inc.） / Raffael Stüken / La Moulade - Creative St...他...全11件
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 | HTML5でサイトをつくろう
HTML5は難しくない? XHTML1.0とHTML5のコーディングの違いを確認してみよう！【初級編：HTML5のマークアップ】 先日のエントリーでもHTML5で作成されたサイトが増えてきていることから、そろそろHTML5の勉強をそろそろしなければと思っている人も多いと思います。 グーグルの特設サイトなどがトリッキーなことをやっているのでHTML5＝難しいと思っている人もいると思いますが、あのような動的なサイトやAPI関連をいきなりやるのはなかなか大変ですし難しいです。それよりほとんどの人ですぐ必要になるのが通常のページをどうマークアップするかだとおもいます。 構造の考え方が全く変わりましたが、マークアップだけでしたらXHTMLとHTML5はいままでxhtmlでマークアップしていた人にとっては簡単に乗り換えられるとおもいます。 xhtmlではブロックレベル要素とインライン要素という分類に分
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
[JS]jQueryのプラグイン33 1選 -2011年6月 | コリス
galleryFocus フォーカスした周辺をアニメーションでフェードさせ、中心をくっきり見せるギャラリー。 [ad#ad-2]
どう考えても無茶な「CSSプログラミング」が話題に
CSS3がいくらパワフルとはいえ、さすがにここまで凝ったものが作れるとは思いませんでした。 まずはChromeでこちらを遊んでみてください。 CSS3 OF THE DEAD - jsdo.it - share JavaScript, HTML5 and CSS まるでJSをバリバリ使ったゲーム、のように見えますが、実は「Only CSS」。上のSTOPボタンを押すとコードを確認することができます。 jsdo.itでCSSプログラミングが流行中！ ええ、どう考えても無茶なんです。CSSはプログラミング言語じゃないですからね。 CSSの機能を巧みに組み合わせて作成されています。 ということで、投稿作品のほんの一部を紹介したいと思います。 CSS PANIC CSSだけで作られたワニワニパニック。 このコードは海外のユーザーにも大きな反響を呼びました。
ギルティクラウン [ GUILTY CROWN ] Blu-ray BOX
全22話に加え、ゲーム『ギルティクラウン ロストクリスマス』完全生産限定版に収録された短編アニメーションなど、 ギルティクラウン映像を完全収録。 特典はキャラクター原案redjuiceの描き下ろしBOX、 澤野弘之により新たにリアレンジされた曲を収録した特典CD、今しか聞けない話が詰まったブックレットなど豪華封入！ [ 収録内容 ] ▽『ギルティクラウン』全22話 ▽SPECIAL ・ゲーム『ギルティクラウン ロストクリスマス』に収録された短編アニメーション ・ノンクレジットOP/ED ・ゆーぽん 4コマ＆フラッシュアニメ―ション（2012年発売パッケージより再収録） ▽音声特典 ・オーディオコメンタリー（2012年発売パッケージより再収録） [ 完全生産限定版特典 ] 1.redjuice描き下ろし 三方背BOX＆デジジャケット仕様 2.澤野弘之 リアレンジCD <収録曲> 1. fri
![ギルティクラウン [ GUILTY CROWN ] Blu-ray BOX](https://cdn-ak-scissors.b.st-hatena.com/image/square/4854e28c9d4bab16430230b1f5ae417d3619a8bb/height=288;version=1;width=512/http%3A%2F%2Fguilty-crown.jp%2Fcommons%2Fimages%2Fog.jpg)
最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン
ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。
Webデザインにおける、1pxへのこだわり
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
プロジェクトの開始までにWebディレクターが用意するものとこと13個まとめ
さて、発注が決まった。クライアントからの要望はまだフワっとしてるけど、納期は何となーく見えている。（もしくは納期だけがカッチカチに決まっている）。 この状態からプロジェクトの本格スタートまでにディレクターが用意するべきものは何があるんだろう？今日はそのへんをまとめてみます。 ゴールまでのざっくりストーリー たとえばコーヒーのポータルサイトだったとして「コーヒーに関する情報なら何でもあります！」って言っても何も始まらない。そこにあるストーリーを多少適当でもいいのでドラマチックに盛り上げてしまいます。 1：店主はかつて2店舗のカフェを切りもりした実店舗の経営者 2：学生の頃からカフェが好きで、なんとか自分の理想のカフェを作りたかった 3：それは、カフェの持つ独特の雰囲気とコーヒーの香りが大好きだったから 4：だから、自慢のカフェの雰囲気を全国どこにいても感じてもらえるサイトを作りたかった。とか
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
YASUYUKI OKAMURA | 岡村靖幸
IDEA * IDEA
CSSの制作・検証に役立つChromeの機能拡張のまとめ