『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity（とにかくシンプルに！） Central layout（真ん中に寄せるレイアウトで） Fewer columns（段組は少なめに） Separate top section（トップ部分は分けて目立たせよう！） Solid areas of screen real-estate（レイアウトにはメリハリをつけて） Simple nav（ナビゲーションはシンプルに！） Bold logos（ロゴは大きめに！） Bigger text（フォントも大きめに） Bold
ステルス・ウェブ・デザイン - Ringo's Weblog 2006年12月16日 アーカイブ
ステルス・ウェブ・デザイン ステルス・デザインの方法という本がある。(Webテキスト) この本では、「レーダーで見つけにくいかたちは良いかたちである」という、 デザインに関する新しい理論を提唱し、その名前を「ステルス・デザイン」と命名している。 ステルス・デザインの理論には、まだ完全に煮詰まっていないところが残るのだが、 極めて大きく発展する可能性を秘めている。 このような面白いアイデアを出すパスファインダー・チームの皆さんには敬服する。 私はまず、ステルス・デザインの考え方を発展させる第一段階として、 「ステルス・ウェブ・デザイン」という方法論を考え、いくつかの提案をする。 その提案資料を作成したので、このエントリにupしておく。 この資料は、Mac用のKeynoteで作成した。PDFで出力すると、 画質が不足して微妙なニュアンスが伝わらないので、時間のある方には、 ぜひTIFF版を見て
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
POP*POP的アイコン配布サイトまとめ | p o p * p o p
よくあるアイコン配布サイトまとめですが、自分へのメモ書きの意味も込めてエントリー。ドイツ語のページでよくまとまっているものがあったのでご紹介しておきます。よろしければどうぞ。 » Icon-Sammlungen — Software Guide ご利用の際には、それぞれの利用ライセンスに従ってご活用くださいませ。 ■ 「80×15」ボタン ↑ 3,400個ものミニボタンを公開しています。 Adam KalseyやLuca Zappaを使えば、ボタンの作成もできます。ブログのRSS用ボタンも簡単に作れます。 » George Taylor McKnight ■ intersmash.com ↑ 1,800のサイトから集められた300のアイコンを公開。矢印、記事、メール、吹き出しなどに使えるかわいらしいのがたくさんあります。サイズは16×16ですね。 » intersmash.com/300i
第8回 デザイナーとともにより良いサイトを目指そう 〜「はてな」のやり方：ITpro
連載第5回（「デザインのセンス，持ってますか？」）においてちょっと触れましたが，ウェブサイトを構築する際に，デザイナーとエンジニア（プログラマ）がかかわり，共同で作業を行うケースというのは少なくないと思います。これはもちろん，デザイナーとエンジニアがどちらもそれぞれ別のスキルを持っているからなのですが，それぞれのスキルや立場が異なるために，お互いにうまく意思疎通ができないケースも多いんじゃないかと思っています。 例えば，デザイナーの作成したウェブページのデザインが，システムを作る側からすると扱いづらい構成になっていたり，逆にエンジニアがシステムの修正や機能追加を行った際に行った表示上の変更が，デザイナーからすると許せないものだったり。そうでなくてもデザイナーの意図を読みきれていなかったり，といった感じで，お互いの作業が，相手の作業を阻害してしまったり，手戻りを発生させてしまうといった経験を
bmfactory.org
bmfactory.org 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
【コラム】プロに学ぶWeb 2.0な画像テク (1) Web2.0的サイトのグラフィック表現 | クリエイティブ | マイコミジャーナル
Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
Japanese Traditional Colors
桜色 (さくらいろ) # 薄桜 (うすざくら) # 桜鼠 (さくらねず) # 鴇鼠 (ときねず) # 虹色 (にじいろ) # 珊瑚色 (さんごいろ) # 一斤染 (いっこんぞめ) # 宍色 (ししいろ) # 紅梅色 (こうばいいろ) # 薄紅 (うすべに) # 甚三紅 (じんざもみ) # 桃色 (ももいろ) # 鴇色 (ときいろ) # 撫子色 (なでしこいろ) # 灰梅 (はいうめ) # 灰桜 (はいざくら) # 淡紅藤 (あわべにふじ) # 石竹色 (せきちくいろ) # 薄紅梅 (うすこうばい) # 桃花色 (ももはないろ) # 水柿 (みずがき) # ときがら茶 (ときがらちゃ) # 退紅 (あらぞめ) # 薄柿 (うすがき) # 長春色 (ちょうしゅんいろ) # 梅鼠 (うめねず) # 鴇浅葱 (ときあさぎ) # 梅染 (うめぞめ) # 蘇芳香 (すおうこう) # 浅蘇芳 (あさすお
ウェブサイトのデザインプロセスをGIFアニメーションで追ってみる
最初に真っ白なページを作り、そこにシンプルな文字列を配置して、徐々に形を整えていくことによってデザインを作り上げるというプロセスをスクリーンショットで記録してGIFアニメーションにすることでわかりやすくしています。このデザインプロセスのGIFアニメーションの作者によると、この記録のタイミングはHTMLファイルを保存したタイミングで行っていったそうです。こうすることによって過去のどの時点でデザインをどのように変えたのかが自分でわかるようになり、過去の時点に戻って別のデザインに発展させるパターンなども可能になるとのこと。また、記録することによってどういう意図で自分はこの部分のデザインをこのように変更していったのかという記録にもなり、制作の腕が上がるそうです。ちょっとした修行みたいなものですかね？ GIFアニメーションは以下から。 designline-openair.gif (GIF 画像,
IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌
Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="/exec/some.html" style="width:100;height:100px"> <p>non object</p> </object> <![endif]--> <!--[if !IE]> <--> <object type="text/html
GNOME 2.16.2リリース MOONGIFT
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
Web 2.0のデザインパターン | S i M P L E * S i M P L E
Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです（「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・）。 さて、ではポイントをば。 ■ グレーの次はグリーンだ！ 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命！ Rounded Cornersは新しい標準す。 ■ 「無料！」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は？素材集す
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
Flashなしでもここまで作れる！：ITpro
Webプログラミングは，プロはもちろんアマチュアのプログラマの間でも，もはや欠かせない開発ジャンルの一つです。しかし，書籍や雑誌の解説記事のほとんどが，データベースがどうとか，サーバーサイドがどうとか，どうしてもディープな方向に進んでしまう傾向にあります。もちろん，それはそれで大切なことなんですが，いったい何割の人が，その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば，動く，鳴る，つながると，いいこと尽くめです。でも，いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては，皆がみな使えるわけではありません。 Part1でも解説があったようにblog（ブログ）の認知度が上がり，利用率も増えて，プロバイダからの提供体制も整ってきて
ウノウラボ Unoh Labs: 【Web Design】なるほどリンク集 その１
こんばんわ、sashaです。 ラボブログの当番が回ってきて、ネタがなくて困っていたところに、私がCSSでデザインをする上で参考にしているサイトを書いてみたら、とみんなに言われました。なるほどねー！じゃ、そうしよう。 ただ、恐縮ですが、私は7月にウノウに入社するまで6年間海外にいたため、リソースも英語サイトばっかです。おっと。アレルギー反応を起こさないでください。興味がある分野で日々英語のサイトを見続けるのも、英語に親しむ手段の一つです。 逆に、国内のリソースに関しては浦島太郎状態なので、皆様からの「このサイトいいよ！」をお待ちしてます☆ さて、第一回目は、日々チェックしたいサイトたちです。今後、「チュートリアル系」、「ユーザビリティ系」など、気が向いたときにまとめたいと思います。 日々の読み物 - 最低限、目を通したいサイトたち A List Apartmezzoblue456bereas
美しいレイアウトを計算してくれるツール :: Love & Design ::
以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ
第18回 ユーザー・インタフェース作りに必要なマーケティング感覚
Webアプリケーションを開発する際に，対象ユーザーを考慮することの大切さについて見てきました。今回は，ユーザー・インタフェース（UI）設計にも，マーケティング感覚が必要なことを考えてみましょう。 UIの問題点を改善していく手順 例によって航空券の予約をサンプルに使います。下記の画面をご覧ください。このWebアプリケーションには，様々なオプションを付け加えることができます。しかし，必要最小限の情報は，「搭乗日」と「出発地」と「到着地」の三項目だけです。このUIに，どこか問題はないでしょうか。 (1) 日付部分への改良 まず注目してほしいのは，搭乗日という日付情報をユーザーにすべて入力させている点です。日付情報をユーザーにまかせ切ってしまうと，表記が統一されず，結局のところシステムでそれを補う処理が発生してしまいます（たとえ「2006/08/02」などと「例」を明記しても，半角文字と倍角文字と
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
毎日考ブログ -Web屋のウェブログ- | Web標準に進路を取れ 第5回「テーブルレイアウトは罪なのか」
テーブルレイアウトとはテーブルタグを、左のようにセルを切ってレイアウトするもの。そもそもはテーブルタグは表に使われるものであって、レイアウト目的で使うべきではないという意見はごもっともなものの、きっちり幅指定や余白指定ができてブラウザ依存しにくいことから、企業サイトはもとよりいろいろなサイトに使われておりました。いや、今でも立派に使われています。 対してCSSレイアウトは、上と同じレイアウトをHTML（XHTML）＋CSSで表現するもの。こんな感じです。記述は一例として適当に書いてるんで、アテにしたり突っ込みいれたりしないでくださいね(笑)。 【HTML】 <div id="header"> <h1>毎日考ブログ（ヘッダ部分）</h1> </div> <div id="main"> <div class="menu">メニュー部分</div> <div class="contents">本
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
*LOVE IS DESIGN* - ちょっとしたメモ風のCSSデザイン