ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめウェブデザインのセンスを磨く方法の一つに、他人の作ったものを数多く見ることがあります。 2011年が終わる前に、チェックしておきたいUIデザインをdribbleから紹介します。
効果的なミニマルデザインと退屈なデザインの境界線
2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more（少ない事は効果的だ）」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore（少ない事は退屈だ）」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう？Wikipediaを見ると ミニマル・デザイン（Minimal Design）は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの
ミニマリズムなウェブデザインから学ぶ、5つの機能的な特徴
ミニマリズムなウェブデザインからユーザーが本当に必要とする機能を学び、散らかったウェブデザインから卒業する方法を紹介します。 Top Minimalist Website Designs: Trends and Examples [ad#ad-2] 下記は各ポイントを意訳したものです。 テキストベースのナビゲーション グリッド カラーの効果的な使い方 より多くの画像、より少ないテキスト ハイパーミニマリスト テキストベースのナビゲーション 画像のロールオーバーを持っていないテキストベースのナビゲーションです。これはユーザーを案内するのに多くを語る必要のないシンプルなテキストメッセージとも言えます。 単に水平に並べただけのものはクラッシクで、最近のサイトではその配置に工夫があります。
jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」
TOP > WebDesign > jQueryで実現するレスポンシブレイアウトプラグイン集「25 jQuery Plugins to help with Responsive Layouts」 様々な端末がリリースされている昨今、それぞれの端末に併せてレイアウトを組んでいくというのは非常に面倒で非効率的です。そこで最近は端末のWide幅に応じて、レイアウトを最適化するレスポンシブな組み方が主流になってきつつあります。今日紹介するのはjQueryプラグインで実現するレスポンシブレイアウトプラグインを集めたエントリー「25 jQuery Plugins to help with Responsive Layouts」です。 Response.js 様々なタイプのレスポンシブレイアウトを可能にしてくれるjQueryが集められていますが今日はその中からいくつか気になったものを紹介したいと
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
ウェブサイトのユーザビリティを改善する 7つの方法 | Startup Dating [スタートアップ・デイティング]
Mashable 日本語訳記事は、株式会社gumi の提供でお送りします。株式会社gumiは、拡大著しいソーシャルゲーム業界において、高い技術力と強固な運営体制をもとに、スマートフォン／フィーチャーフォン向けにゲームを提供するSAP（ソーシャル・アプリケーション・プロバイダ）です。我々は、日本はもちろん全世界に向けて、次世代のエンタテインメントを提供するリーディングカンパニーとして、グローバルNo.1を目指します。エンジニアをはじめ多数のポジションで絶賛採用中です。 All reproduction of the Mashable content is licensed by PARS International. (c)2011 Mashable, Inc. All rights reserved. 【翻訳 by Conyac】【原文】 Web ユーザー向けのコンテンツを書くことには独特
susi-paku ('A')！さんの「WEB屋が選ぶ "ホームページを作る人のネタ帳” さんが書いた記事ベスト20」 | ランクス
ホームページを作る人のネタ帳さんが今まで書いた記事の中で印象的に残った記事をランキングしてみました。 ('A')たぶんほとんどの記事を読んでいるWEB屋の自分が勝手にセレクトしています。【参加範囲は自由です】 今読むと懐かしい記事から、今も変わらない信念が通った記事なんか改めて実感できますね。 ５つのブログ地獄 ホームページを作る人のネタ帳さんが今まで書いた記事の中で印象的に残った記事をランキングしてみました。 ('A')たぶんほとんどの記事を読んでいるWEB屋の自分が勝手にセレクトしています。【参加範囲は自由です】 今読むと懐かしい記事から、今も変わらない信念が通った記事なんか改めて実感できますね。 WEBで自分が伝えたい事をきっちり相手に伝える為の7のコツ ホームページを作る人のネタ帳さんが今まで書いた記事の中で印象的に残った記事をランキングしてみました。 ('A')たぶ
cssで縦方向中央に配置する方法（5つのケース＋1） | バシャログ。
iPhone 4Sが発売間近。 買おうか迷って一旦諦めたはずがまた迷い始めました、hakoishiです。 Siriに甘い言葉をささやきたい。英語できないけど。 さて、コーディングで縦中央にオブジェクトを配置したいことって少なくないですよね。 しかしながら、cssはそういうのちょっと苦手。 「ほら、あの時使ったアレだよアレ！」と過去のソースを掘り起こしてみても、状況が違ってて使えないケースも多かったり。 というわけで今回は、cssで縦中央配置するためのtipsを5つのパターンに分けてまとめました。 case1：画像の場合 上下方向中央を始点として画像を配置し、画像の縦サイズの1/2だけネガティブマージンで上に移動。 サンプル html <p class="case01"> <img src="http://dummyimage.com/100x100/000/fff.gif&text=img
[連載]Webデザイン入門（3:光とボタン）
3日目の講義ではちょっとしたボタンを制作したのですが、テキストに載っていたボタンがちょっとおかしな感じだったので、反射光に関して簡単に説明してから、反射光を取り入れたボタンを制作しました。 ちょっとおかしな HOME ボタン Photoshop のテキストの最後にボタンの作り方が載っていたのですが、なんだかちょっとおかしいですね…なぜおかしいのでしょうか。 電球マークは光源、オレンジの矢印は光線を表すものとします。 おそらく、著者の方はボタンには上から光があたっているものと考えて、このようなボタンにしたのではないでしょうか。 あるいは、単に Photoshop のデフォルトのグラデーションが白から黒なので、このようにしたのかもしれません。 しかし、このような光の当たり方は、現実世界ではありえません。 （たとえ太陽光などの入らない密室でも、壁や床に光が反射する場合があるため） もっと身近な例
![[連載]Webデザイン入門（3:光とボタン）](https://cdn-ak-scissors.b.st-hatena.com/image/square/ba55948aebf9bd09cec00d2b9655ded91948f9f2/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fstocker.jp%2Fdiary%2Fwp-content%2Fuploads%2F321-1.png%3Ffit%3D300%252C300%26ssl%3D1)
ホーム - ウェブパッケージ
整理され、シンプルで、使い勝手が良い。メトロスタイル（カードスタイル）は、すべてのメインコンテンツが配置されたセクション（カード）を使ってサイト構造を構築するという原則に基づいています。
斜めグリッドを使ったデザインのウェブサイト集
ここ最近のことなのですが、綺麗なデザインのサイト集なんかを見て回っていると何度か斜めグリッドを基準にしたデザインのサイトを見かけました。 こういうの何て言うんでしょうね。斜めグリッドなのでDiagonal Grid Based Webdesignとでも言えばいいんでしょうか。 どのサイトも非常にインパクトが強く印象的だったので、数は少ないですが紹介してみようと思います。 Jessica CaldwellJessica Caldwell ポーランドのウェブ制作者さんのポートフォリオ。 各ブロックはli要素をtransform: rotate()して作られています。 ブロックは一つ一つがナビゲーションで、マウスを乗せるとアニメーションでメニューが表示されます。 Designer GlebDesigner Gleb / Graphic&Web Designer Gleb Leksikov フリー
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
hitode909の日記
他人と同じコンテンツを鑑賞して感想を言う、という経験の頻度が低くなると、わかり合いレベルが低くなる気がする。 同じ本を読んで、どうでしたか、とか、この文章についてはどう思いますか、みたいなことを言うと、相手の考えてることが分かり、どの部分が合意してるか、ということがわかりやすい。 同じコンテンツを鑑賞していない場合のやりとりとしては、まず相手の意見を聞いて、そしてこちらの意見を言う、というキャッチボールになるけど、立ち位置を表明するつもりが、相手への指摘みたいになって、べつに論破したいわけじゃないんだけど、みたいになる。 ということがあって、1on1などで、本を紹介したり、相手に紹介された本は、とりあえず買ってみたりしている。 心斎橋のパルコの屋上に行ったら、オリーブが多数植えられていて、子どもたちが拾ったりなげたりして遊んでいて、良い空間だった。商業施設なので、警備員が対角線上に2人佇ん
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
あなたのウェブページが機能しているか7つの面からチェックできるオンラインツール -Spur
Spur [ad#ad-2] Spurの使い方 入力フォームにチェックしたウェブページのURLを入力して、「Spur it on」ボタンをクリックします。 画像でチェックしたい場合は、「Spur it on」ボタンの下にある「Upload an image」をクリックします。 クリックすると、ウェブページに7種類のエフェクトを与え、そのままでは気がつきにくい面からさまざまなポイントを確認することができます。 以下、その7種類のエフェクトを紹介します。 Grayscale グレースケールはデザインからカラーを取り除くことで、ユーザーの目がページのどこに引き寄せられるか確認するのに役立ちます。 見出しはブラックの背景にホワイトのテキストで高いコントラストを確認できます。 ロゴとナビゲーションはコンテンツサイトにドロップバックしています。 最新情報のコンテンツはグレースケールになると、コントラス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
javascriptで作った、フルフラッシュのようなサイト教えてください。
クリエイティブでデザイン性の高い国内サイト ベスト14 – 2011年10月版 | WDS
IDEA * IDEA
