IDEA * IDEAドットインストール代表のライフハックブログ
モバイルサイトデザインの考え方 : LINE Corporation ディレクターブログ
こんにちは。ケータイlivedoorを担当してます多留です。 今回は、私がモバイルサイト作りでいつも意識して取り組んでいる "配色の仕方"、"メリハリの重要性" についてお話させていただきます。 モバイルサイトと配色 モバイルサイトは、PCのようにガンガン画像を使うとか、JavaScriptを使って動きをつけるとか、まだまだできないこと、制限のあるところが多々あり、線や細かい背景色・文字色・絵文字の使い分けなどでページを構成する必要があります。 配色や見せ方に関してはセンスが問われるところで、特にモバイルサイトのように凝縮されたスペースでの表現は難しく、苦手な人はホントに「いつまでたっても苦手」という方も多いと思います。 私個人としては、PCよりもモバイルサイトで全てを済ませようとしていて (つまりは携帯依存症……) いろんなジャンルのモバイルサイトデザインを見ているおかげで、配色や見せ方
Webサイトのフッター２００個とフッターデザインの考え
フッターの美学。 そんな素敵サイトを紹介しようといくつかチョイスしていたら海外ブログのDWSが「The 200 best footers on the web」なんていう化け物エントリーをさらっと出してきたもんだから驚きだ。 しかもクオリティもめちゃ高い。 なので今回はこのエントリーを紹介して終わろうかなって・・・。 参考までにネタ帳が好きなフッターを７つほど紹介します。 たま、フッターまとめサイトの楽しみ方も一応書いておきます。 以下からどうぞ。 すばらしいフッターデザイン２００ The 200 best footers on the web « Web Design Shock もはやひとつのショーケースというか一冊の本になってもおかしくないクオリティの記事です。 ご堪能あれ！ 中でもネタ帳がお気に入りのフッター７つ Tomáš Pojeta | kreativní grafik ここ
WEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」
TOP > WebDesign > WEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」 一から全てデザイン、制作することは精度も上がりますし、クリエイターとしては当たり前のことなのかもしれませんが、案件ベースで見て、予算や時間的な問題で、デザイン、設計などを全てオリジナルでこなそうと思うと無理がある案件もあるかと思います。そんな時に役立つのが今回紹介するWEBデザイナーのためのフレームワーク30「30 Useful Frameworks for Designers」です。 Simpl よく見るグリッドシステムから、シンプルなCSSのデザイン処理を集めたもの、wordpressのテンプレートを作るためのものなどなど、制作の負荷を軽減してくれる、様々なフレームワークがまとめられています。今日はその中から幾つか気になったもの
Webユーザインターフェースの "暗黙知" を意識していますか？ : LINE Corporation ディレクターブログ
暗黙知（あんもくち、Tacit Knowing）は、ハンガリーの哲学者・社会学者マイケル・ポランニー（Michael Polanyi) によって1966 年に提示された概念で、認知のプロセス、或は、言葉に表せる知覚に対して、（全体的・部分的に）言葉に表せない・説明できない知覚を指す。Wikipediaより こんにちは。livedoorで検索全般を担当しております、須田です。 タイトルのままなのですが、少しづつ日本のWEBにおける暗黙知を共有したいと思っています。 暗黙知の共有することで得られるメリットですが、 ユーザーにとっては、分かりづらいUIを日本からできるだけ無くすことができ、斬新なUIに慣れるという煩わしい時間からの開放企業にとっては、暗黙知として決まりがあることで、UIを検討する時間の短縮にもなるというメリットがあると思います。 まずは誰でも知っていると思われる基本的なところだけ
配置をマスターして「機能するレイアウト」を作る大切なポイント
ページに配置するエレメントの特質を理解し、1/3ルールやスペースやグリッドなどのデザインルールを取り入れ、「機能するレイアウト」を作るポイントを紹介します。 Using Landmarks Makes Page Layout Easy 下記は各ポイントを意訳したものです。 はじめに レイアウト、あるいはページのコンテンツの配置はウェブデザインの成功にとって重要です。レイアウトは一つのエレメントから次のものに向けるためにコンテンツの優先順位をつけます。 もしレイアウトが正しく機能していれば、ユーザーはコンテンツに興味をもち、他のものには気をそらさないでしょう。ここではあなたのデザインで機能するレイアウトを作るためのヒントをいくつか紹介します。 下記の例では、多くの人が最初に写真あるいは見出しに目がいき、その後にテキストに、そして最後にリンクの順番になるでしょう。 このレイアウトでは、見出し、
商用可！WEBデザインテンプレートをpsdでダウンロードできる「Free PSD Theme」
TOP > Design , Font , Photoshop , WebDesign , WebService , WordPress > 商用可！WEBデザインテンプレートをpsdでダウンロードできる「Free PSD Theme」 WEB制作に使うツールは人それぞれでこれしか無いというものはありませんが、WEBデザインのモックを制作するときにphotoshopを利用して制作していると言う方にオススメなのが、今回紹介するWEBデザインテンプレートをpsdでダウンロードできる「Free PSD Theme」。 まだ数はそこまでありませんが、クリエイティブで質の高いWEBテンプレートがフリーでダンロードできます。系統的にはどれもキレイめなものが多く、洗練された雰囲気のテンプレートが中心です。今回はいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Fre
ミニマルなウェブデザインで使用される特徴的な12のエレメント
ミニマルデザインでよく使用される特徴的なエレメントとそれを効果的に使用したウェブサイトを1stwebdesignerから紹介します。 Modern Element Trends In Minimal Webdesign of 2010 ミニマルデザインの特徴的な12のエレメント 参考として当サイトで紹介した関連記事を記しています。 多くの効果的なネガティブスペース 参考：ウェブデザインにおけるネガティブスペースの活用ガイド グリッドベースのウェブデザイン 参考：グリッドシステム -サイトへの有効活用方法 クリアで大きなタイポグラフィ 繊細なテクスチャとパターン 小さいアイコン 軽いシャドウ、グラデーション、レタープレスのエフェクト 参考：ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル レタープレスエフェクトのチュートリアル リボン、スケッチ、点線、ルーラー、半透明な
透過性をウェブデザインに取り入れる方法
CSSや画像などを使用して、透過性をウェブデザインに取り入れる方法をCSS-Tricksから紹介します。 Spectrum Theme どんなウェブデザインでも最終形では基本的に目の錯覚を巧みに利用しています。Photoshopをはじめ他のグラフィック用のアプリケーションで透過性のエフェクトを作成し、フラットな画像として書き出すことができます。 Photoshopで透過性のある画像を作成するには、レイヤーの不透明度、塗りの度合い、ブレンドモードなどで可能です。 Opacity <textarea name="code" class="css" cols="60" rows="5"> transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } </te
Webデザイン事始め其の三・GIMPで窪みのある文字を作ってみる - かちびと.net
なんとなく気が向いたので 書いてみます。右画像の様 な、窪んだ感じの文字を オープンソースのツール、 GIMPでサクッと作るチュート リアルです。 今回も「デザインの扉を開いてみよう」という趣旨になっています。実用的というよりは操作法を覚える為のもの、興味を抱いてもらうための内容です。Photoshopでは無く、GIMPにしているのはそういった理由からです。「GIMPってなに？」という方は「まずはフリーソフトで始めよう。GimpとInkscapeの説明が分かりやすいサイト」をご覧下さい。 今回は窪みのあるテキストの簡単な作り方。 文字を書く まず、文字を書きます。大きさなどはお好みで。大きい方が分かりやすいかもです。 テキストを選択肢にする レイヤー→テキストから選択範囲→テキストを選択範囲に レイヤーを追加してグラデーションを掛ける グラデーションをかけます。テキストを選択したままレイヤ
超クールな可変グリッドレイアウトのギャラリーWPテーマ・Mansion - かちびと.net
超クールなギャラリー用テーマ、 Mansionのご紹介です。もちろん フリー。可変グリッドレイアウトで、 いかなる環境でもグリッドが崩れ ることが無いのは助かりますね。 敷き詰められた写真の織り成すギャラリーがとても美しいです。 素晴らしいです。左上にメニューが出ますよ。画像はマウスオーバーで明るくなり、フェードエフェクトもかれられています。 ご覧のように縮小してもレイアウトは守られています。 頭痛の種のIE6でも問題なし。アニメーションエフェクトだけかかりませんが、特に問題ではないですね。 デモのページ全体のキャプチャです。 ダウンロード DLはメンバーページで。上記の場所がDLのリンクです。 普通にこのまま使えそうですね。ダウンロードは無料ですが、メンバー登録が必要です。フリープランでもDL可能で、このテーマ以外も高品質なテーマが手に入るサイトですので登録しても損は無いかと思います。
なんとなく和むイラストベースのWEBデザイン集60:phpspot開発日誌
60 Excellent Examples of Illustration in Web Design | Inspiration なんとなく和むイラストベースのWEBデザイン集が60サイトほどまとまったエントリのご紹介です。 イラストがうまい感じにWEBデザインに当てはめられており、イラストベースのサイト作りの際の参考に出来そう あえて探そうとするとなかなか無かったりするものですが、まとまっていると便利ですね。 関連エントリ 斬新なコメントフォームデザイン集 ビンテージ感が素晴らしいサイトデザイン集 デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集 黒ベースのクールなWEBサイトデザイン集
ビジネス向けからポートフォリオまで今時のウェブデザインのチュートリアル集
ビジネスサイトをはじめ、女性や子供をターゲットにしたサイト、ポートフォリオやブログの個人サイトなど今時のウェブデザインを踏襲したPhotoshopのチュートリアルを紹介します。
WEBレイアウトを便利にしてくれるフレームワーク関連のWEBサービスやツール集「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」
WEBレイアウトを便利にしてくれるフレームワーク関連のWEBサービスやツール集「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」 WEBでコーディングをしていくときにとても便利なフレームワーク。上手く使えばデザインからのコーディングが劇的に早くなります。有名なものもあり、いくつか実務に使っていると言うWEBデザイナーさんも多いかと思います。今日紹介するのはWEBレイアウトを便利にしてくれるフレームワークをつくるWEBサービスやツールを集めた「Liquid, Fluid and Elastic Layout Templates, Tools and Frameworks」というエントリー。 Tiny Fluid Grid グリッドを自由にカスタマイズして作れるWEBサービスから、テンプレートまで様々なレイアウト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
奥行きを与える立体的なエレメントを使用したウェブデザイン集
白黒のクールなサイトをデザインする際に参考になる30選:phpspot開発日誌
細部に凝った一度見たら忘れなさそうなブログデザイン７３:phpspot開発日誌
しっかりと細部までデザインされたコンタクトフォームのデザイン集
平面だけど立体感を出したWEBデザイン色々:phpspot開発日誌
ブラウザベースのワイヤフレーム素材 -Paper Browser