This shop will be powered by Are you the store owner? Log in here
Bridge Word
This shop will be powered by Are you the store owner? Log in here
新聞・雑誌風レイアウトでみかけるウェブデザインの12のトレンド
新聞・雑誌風レイアウトのニュース系ウェブサイトでみかける特徴的な12のトレンドをVandelay Designから紹介します。 Trends in News and Magazine-Style Web Design 1. ホワイト（明るい）背景 新聞・雑誌風レイアウトのサイトではコンテンツの比重が高く、ホワイトか明るい背景にする傾向があります。それは一般的にリーダビリティのために良いことです。 もちろん、例外もあります。しかし、メジャーなニュース系ウェブサイトではほとんどがホワイトの背景を使用しています。 True/Slant 2. グリッドベース 新聞・雑誌風レイアウトのサイトのレイアウトには、グリッドベースのレイアウトが採用されています。多くのコラムやテキストが配置されるため、グリッドはこういったタイプに非常に効果的です。 グリッドはコンテンツを適度なスペースで配置し、より読みやすく
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
素敵な名刺デザインいろいろ
個人的に好みの名刺デザイン の例をメモ。いつか書きたいと 思っていましたが、なかなか 機会がありませんでした。 個人的に好みの名刺デザイン の例をメモ。いつか書きたいと 思っていましたが、なかなか 機会がありませんでした。 たまたま、先日名刺の話題を Twitterでしていたのでついでに エントリー。 一貫性もコメントも何も無い、個人的なメモ（ギャラリー）です。 Paper Napkin Designs Paper Napkin Designs i Draw Designs i Draw Designs caddyshack putters caddyshack putters ed ed doTerra doTerra Andy-Westwood Andy-Westwood Bridge Photographic Bridge Photographic Tecknogr▲fick™ Te
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
デスクトップの壁紙を宇宙から見た美麗な地球の画像にして刻一刻と自動更新するフリーソフト「Desktop Earth」とインストール不要の「Desktop Earth Online」
宇宙から見た地球の様子を壁紙化し、刻一刻と昼と夜の境界線が移動していったり、雲が流れていく様子、都市の明かりをデスクトップに反映させることができるかなりいい感じのフリーソフトがこの「Desktop Earth」です。インストールして常駐させることでどんどん更新させることができるため、時間の経過を肌で感じることができます。また、わざわざインストールさせるのは面倒、気に入ったその瞬間の画像さえあればそれでいいという人のために、インストール不要のオンライン版、「Desktop Earth Online」というのもあります。 画像は可視光でとらえた地球の本当の色を膨大な地球観測衛星データの処理に基づいて記録したNASAの画像データ「Blue Marble Next Generation」と、同じくNASAの提供している地球の夜景画像データ「Earth's City Lights」から生成しており、
【全部無料】 Web制作に役立つオンラインサービスやツール300+ - かちびと.net
Web制作に使えるWebサービスやツールなどが様々なサイトでかなり 紹介されています。便利なものですが、多すぎて混乱するので、 備忘録的にローカルサーバーに入れたWPでリンク集を作っていました。 そろそろ数が落ち着いて来たので多くの方とシェアしたいと思い、公開してみます。 現在330ありますが、追加していく可能性があります。 リンク集は全て無料で使える事を条件に集めていました。英語が苦手な方もいらっしゃいますのでTwitterサービスのまとめ同様、日本語で使い方などを説明してくれているサイトにリンクしています。無い場合は海外サイトにリンクしていますが、その場合はアメリカの国旗をつけてあります。サイトがアメリカのものかは知りませぬ。分かりゃいいんだ、分かりゃ。 無料といえどもライセンスの縛りもありますので自己責任でご利用下さい。 使えるかどうかは個人差が生じますので何とも言えませんが、お役に
Fonts Used In Logos of Popular Websites « Build Internet
This roundup was gathered through a combination of top notch Google-ing and What the Font?-ing. Midway through my travels across the internet, I stumbled upon a Web 2.0 logo font roundup, which is worth a look as well. You’ve seen these fonts, now you get to learn their names: Twitter – Pico Alphabet (Modified) Digg – FFF Forward (Modified) Cork’d – Triplex Vimeo – Black Rose Grooveshark – FF Nuvo
【連載】セカイ系ウェブツール考 (76) iPhone/ Android向けアプリのデザインに役立つもの | ネット | マイコミジャーナル
今回のテーマは「モバイルデザイン」 Googleは開発者向けイベント「Google I/O」や「Google Developer Day」で無料でAndroid端末を配布した。iPhoneは先日、iPhone 3G Sを発表しており間もなく発売が開始される。どちらもモバイルの業界地図を変えかねないほど熱狂的に取り上げられている。 従来の携帯電話と大きく異なるのは、アプリケーションのマーケットプレイスの存在だろう。これにより開発者が自作したアプリケーションを有料で世界中に販売できるようになる。企業ではマネタイズが難しいかもしれないが、個人の開発者がアイディアひとつで勝負するには非常に面白い環境だ。 アプリケーションや最適化されたWebサイトを構築する際には、その端末に合わせた制約がいくつか存在する。そのため、ただやみくもに作るのではなく、まずはモックアップやワイヤーフレームを使って試してみる
アニメが「命を吹き込んだ」――未来の“N”端末「ノブレス携帯」誕生の秘密
卒業旅行でホワイトハウスを訪れた大学生・咲の前に、一糸まとわぬ姿で現れた1人の少年。記憶を失っていた彼の手には、拳銃と82億円もの電子マネーがチャージされた携帯電話が握られていた――。 フジテレビの深夜アニメ放送枠「ノイタミナ」で放送されている「東のエデン」で、「携帯電話」が作品の重要なキーアイテムとして活躍しているのをご存じだろうか。少年が持っていた謎の携帯「ノブレス携帯」は、近未来的かつガジェット感あふれる造形が登場人物に負けない存在感を放っている。 作品を手掛けたのは、世界的にその名を知られるアニメーション制作会社、プロダクション・アイジー（Production I.G）。士郎正宗氏のマンガをアニメ化した「攻殻機動隊」シリーズをはじめ、同社が紡ぎ出すリアルな“未来の世界”に魅了されるファンは多く、今回のノブレス携帯もそうした世界観を生み出すツールとしてアニメーターがデザイン……したか
Ringo's Weblog: 知識の量が質に変化する瞬間
プライバシーポリシー | サイトポリシー | 商標 | フィード | サイトマップ Copyright© 2000-2007 Community Engine Inc. All rights reserved.
村上隆とヴィトンのコラボで、超ポップなQRコードが誕生
本当にサイトにジャンプできますよ。 さえない白黒模様のマークを見かけることも、今では普通になってしまいましたけど、二次元バーコードのQRコードが誕生してから、今年で15年になるんですね。まぁバーコードなんだから仕方ないんでしょうけど、でも、もうちょっとデザイン的にオシャレだといいんだけどなぁ… な～んてつぶやいた人はボクだけではないと思うんですけど、やってくれましたよ。このほど、ポップアーティストの村上隆さんとLouis Vuitton（ルイ・ヴィトン）のコラボレーションにより、初めて村上隆さんがデザインを手がけるQRコードが完成。いやぁ、どうです？ あの地味で殺風景な白黒QRコードが、こんなにもキュートなアートになるなんて、さすがですよね！ ただのコンセプトデザインではなく、普通にヴィトンのサイトへジャンプする、立派な本物のQRコードとしての役目も果たしてるっていうから驚きです。SETの
エンジニアにもわかる「ユーザーインターフェース設計」
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog はじめに 島津悠樹と申します。Yahoo! JAPANのソーシャルメディア系サービスの開発・ユーザーインターフェース（以下UI）設計を担当しています。私からは「エンジニアにもわかる『ユーザーインターフェース設計』」と題し、エンジニアのみなさまに考え方のヒントとなるようなネタをお届けします。 エンジニアの方々にとって、UI設計は、おもしろそう、けれど、どこかとっつきにくい......、そんな印象を持っておられるのではないかと思います。 私も以前はそう思っていました。ですが、とっつきにくさを理由にUI設計をやらないのはもったいない、という思いで試行錯誤した結果、なんとか、UI設計のお仕事をいろいろ担当させていただくことができるようにな
建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト
前回の記事では、実際の建築プロジェクトにおいて、建築家が建築現場の指揮をとったという実例を紹介しました。今回は設計寄りの話題に移して、プロジェクトだけではなくWebの設計面においても建築分野から学べる考え方があるというお話をしたいと思います。 Webサイトは変化し続けるWebサイトは構築されてから情報が追加されたり、修正されたりしていきます。 これは情報を扱うメディアとしては当たり前のことで、たとえば、雑誌などでも創刊号でつくられたコンセプトを、その後発行する各号でより磨きをかけたり、軌道修正させたりします。 しかしながら、この「変化」は、ただやみくもに変えていけばいいのではなく、その影響範囲や必要性を検討しながら行わなければなりません。今回は、この「変化するWebサイト」についてのありかたを、情報アーキテクチャの観点から考えてみます。 こういった「変化」をWebの設計にどういった形でおり
![建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab17de853b8c29cab6194a39392ba38d04eb0dd/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fweb_project%2Fweb_project_icon.jpg%3Fitok%3DqL-1gvO5){kind=icon}
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.crara.cc/archives/568
InfoQ: データ、コンテキスト、相互作用 : James O. Coplien氏とTrygve Reenskau氏による新しい設計方法
Yahoo Developer Network
マウスオーバーをデザインする | DesignWalker
Google Chrome Themes Gallery
