2007年度のCSSデザインベスト50発表
CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/
ホームページのデザイン本を買う前に見ておくとお得なエントリまとめ 見本サイト数135程*ホームページを作る人のネタ帳
（このイメージは、このブログの記事内容をイメージするもので、実在しません） 先日書店に、ホームページのデザイン集なるものがおいてあったので、買ってみた。 2000円出して買った本ですが、どうも損した気分に陥る。 そんな損した気分に陥る人が他にもいるかもしれないので、ホームページ、及びブログのデザインのインスピレーションをここにまとめておく事にします。 30ブログデザイン 最近話題になったエントリ。 30 More Excellent Blog Designs 良質なブログデザイン30サイトのまとめエントリ。 Simplicity and Whitespace（シンプルと空白のデザイン）からはこのブログデザインが好き。 すごくすっきりしているというのとさっぱりしていて、ちょっとクドイ。 Theocacao Weblogs Which Don’t Look Like Weblogs（ブログのよ
デザイナーが嫌がる痛い客のありがちな行動･クレームの対処法*ホームページを作る人のネタ帳
デザイナーが嫌がる痛い客のありがちな行動･クレーム デザインというのは、企画段階でその姿カタチが、見えにくいものであり、それゆえに、客はものすごい要求をしてくる。こちらがプロだという意識が過剰になり、何でも出来ると思われていることが間違いではあるが、皆様もこんな問題は無いだろうか。 記事の内容を見るとウェブデザイナーを対称にしている感じ。 ウェブデザイナーには様々なクレームが付きまとうものですが、ちょっとした事で解決できることが多いので一応記事に。 ただ、私は確かに制作はするも、ほとんど下請けにだしたりするので、ウェブプランナーとしての意見となることを先に言っておきます。 クレーム解決マニュアル ◆要求が抽象的 なんか、グレーな感じ、明るい感じ･･･などなど･･･。意味不明の要求仕様を突きつけられるも、当然のごとく意味不明なので、それだけでは判りませんと、反論。挙句の果てに『プロだろ？なん
PhotoShopが無いときに激しく便利なオンライン画像編集サイト『flauntR』*ホームページを作る人のネタ帳
オンライン上で画像を編集するサイトは様々存在しますが、1クリックで色々編集していく事が可能なのが『flauntR』です。 結構使い始めると、重たいのが少し気になりますが、便利すぎて驚きました。 詳細は以下で。 flauntRの特徴 flauntR flauntRは無料で使えるオンラインフォトエディタですが、その最大の特徴は英語がわからない私でも使える手軽さにあります。 それではそれぞれのサンプルを見てみましょう。 photostylR ワンクリックで、画像に対して様々な特殊加工が出来るアプリ。 枠を付けたり、画像をゆがませたり、ノイズを入れたりといった加工が可能です。 photoeditR これはトリミング（画像のカット）や、リサイズなどが出来ます。 リサイズサイズを移動でき、正確なカットができる為トリミングに関してはPhotoShopよりも簡単です。 photoprofilR これは各種
クリエイターを笑顔でまとめるロフトワークの名ディレクター
インターネットでバーチャルなチームを組み、ウェブサイトや携帯電話のコンテンツ制作を手がける会社、ロフトワーク。その進行役を務め、優秀なディレクターだと噂の高い女性がいる。中田はるかさん。依頼主の意を汲んで適切なメンバーで作り上げるコンテンツは高評価。 意志の強い表情を時々見せながらも常に笑顔の中田さんに、仕事への思いとプライベートについて聞いた。 依頼主とクリエイターを仲介する 中田さんの仕事は、主にウェブ制作やSNS、携帯電話のアプリなど、コンテンツの制作管理。依頼主は「化粧品、アパレル、製薬、食品･･･いろいろです。面白ければ何でもやっちゃうという気持ちでやっていますね」。 依頼される内容は、2週間程度で終わるものから半年程度かかる大きなプロジェクトまでさまざまだ。 中田さんはまず、依頼主が求めるイメージを正確に聞き出す。時には、依頼される指示だけではなく「市場動向を見ながら、依頼主が
新規でサイトを作るのに使えそうなの一式。（あの人のパクりじゃないんだからっ！）｜CSS HappyLife
08年6月4日追記： コレの新しいの作りました。 新規でサイトを作るのに使えそうなの一式。Ver 2 11月7日追記： contens.cssの56行と60行目の#contents部分でスペルミスしておました。 ごめんなさい... 現在は修正版になっております。 修正後のcontents.css --- SO905iがやば過ぎる件。JOGですよ！じょぐ！！！すげー待ってた。アナタを心から待っていた。 さて、一行駄文はお終い。本題です。 毎回新規サイトを作成する場合は、以前組んだのからコピって来て使うケースが多くて何かと面倒だと思っていたわけです。 んで、自分仕様のが欲しいと思ったので、仕事そっちのけで作ってみました。 以前からソレっぽいのは公開したり、なんやかんやだったんですが、11月2日Verって事で。 どうせ新規サイト作成の際にちょっとずつ見直しが入っていくので、すぐに古くなってしまう
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
![[CSS]気をつけたいIE 7のバグ -CSS-Discuss](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
mixiもGREEも、コミュニティ運営は難しい？
サイトの規模が大きくなると、誰もが満足する仕組みを作るのは難しくなるようです。先日リニューアルした「mixi」ですが、評判は芳しくなく、一部のユーザーからは見づらいとの声が挙がっています。またモバイルSNSの「GREE」は写真表示をアバターに変えたことで、ユーザーからの反発を受けました。ユーザーのために行ったサイトの改善やサービスの追加が必ずしも受け入れられるとは限りません。このようなソーシャルコミュニティサービスで、ユーザーの不評をかった場合どう対処するべきなのでしょうか。また、参加ユーザーの満足度を向上させるにはどのような点が重要なのでしょうか。パネリストの皆さんのお考えを聞かせてください。
グッドデザイン賞を受賞した「スゴイ地図」のすごい理由
図2●画面中央が位置情報。右端の帯は縦スクロール可能な閲覧履歴のキャッシュ。画面下にあるサムネールは保存したキープした店舗情報 リクルートが運営する位置情報サービス「スゴイ地図」が，2007年10月1日発表の第51回グッドデザイン賞を受賞した。スゴイ地図はゼンリンデータコムの地図情報エンジン上に，リクルートが持つ店舗紹介などの地域情報を表示させるサービスだ。企画がリクルート，制作ディレクションとデザインはコスモインタラクティブが手がけている。 位置情報といえばGoogleマップなどを連想するが，スゴイ地図はフルFlashコンテンツである（GoogleマップはAjax）。Flashらしくユーザー・インタフェースのデザインには様々な工夫を凝らしている。トップの画面はメモ用紙を切り貼りしたようなコンパクトな情報を一面に表示している（図1）。地図とキーワード検索ツールだけといったシンプルなサービス
デザイナーが使う素材集
ページの雰囲気を向上させるため写真などの要素が欲しいときは、各社ベンダーが運営しているフリー素材集販売サイトを使おう。代表的なサイトは以下のとおり。 イメージナビ http://imagenavi.jp/ amana http://amana.jp/ デクスイメージ http://www.dex.ne.jp/deximage/index.html マイザ http://www.mixa.jp/ Shutterstock http://www.shutterstock.jp/ これらは豊富な著作権フリー素材を含むが、利用範囲を視聴者が25万人以下の媒体、あるいはWebサイトのみ、などと限定しているものもあるため、利用の際は各社が定める権利の範囲を確認してほしい。また、モデルの顔などがはっきり認識できるタイプの写真を使うときはちょっと加工して被写体が目立ちすぎるのを回避することも重要だ。そのま
フリーの画像編集ソフトを使う
ある日突然サイトの更新担当になったとしよう。素材画像の最適化や編集作業もまかされた。しかしプロのデザイナーでもあるまいし、高価な画像編集ソフトの購入申請などできそうもない。という場合、頼りになるのがフリーソフトである。たくさんの選択肢があるが、有名な2作品を紹介しよう。 ■The GIMP2.2 for Windows http://gimp-win.sourceforge.net/stable.html GIMPはオープンソースの画像編集ツールだ。選択ツールを駆使した画像のコラージュや、色補正など、プロ用製品と同等に活用できる。カラーパレットを最適化しつつGIF画像の書き出しができる点も特徴だ。Windowsに付属の「ペイント」ツールでも画像をGIF形式で保存できるが、こちらの場合画像が使用している色を無理やりGIFが保持可能な256色以内に変換してしまうため、色が変わったり、全体に砂を
デザイナーが使うフォント集
メッセージを伝えるにはフォントに工夫が必要なときも。 デザイナーがよく使うフォントのベンダーには以下のような種類がある。 欧文フォント FontFont スタイリッシュで個性的なフォントが多い。http://www.fontfont.com/ Linotype 著名な欧文フォントのほとんどが手に入る。フォントの歴史も勉強できるサイト。http://www.linotype.com/ 和文フォント FONTWORKS ロダンや筑紫ゴシックなど特徴的だが使いやすいデザインのフォントがある。http://www.fontworks.com/ モリサワ 見出しゴや見出しミンといった紙媒体でおなじみのフォントを提供している。http://www.morisawa.co.jp/ DynaFont リーズナブルな価格でＤＦ金文体やＤＣクリスタルなど面白いフォントが入手可能だ。http://www.dyn
clearfixでfloatを解除 | d-spica
clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;
創造性あふれる404エラーページを作ろう＆参考になる404ページ紹介 | Moz - SEOとインバウンドマーケティングの実践情報
よく私たちがクライアントにお勧めするアドバイスの1つに、404エラーページを必ず適切な構造のものにしておくこと、というのがある。一般に私たちは、次のうち少なくとも1つを404エラーページに盛り込んでおくよう勧めるのよ。 存在しないページにアクセスしようとしたことを伝えるメッセージ検索ボックスサイトマップへのリンクホームページへのリンクさらに404エラーページといえど、デザイン的にも美的にもサイトの他のページと共通していないとだめ。404エラーページをたくさん見てきたけど、すごく平凡で、サイトのデザインを反映していないページのなんと多いことか。なんだかそこだけ浮いた感じで、ユーザーを混乱させてしまいかねない。 もう1つユーザーを困惑させるのが、勝手にホームページにリダイレクトしてしまうこと。SEOの立場から言わせてもらうと、正しくないURLを301でリダイレクトするのは、ユーザーがどのページ
スクリーンショット.jp - 複数のブラウザ環境でサイトのレイアウトチェックツール
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最初に指定しておくと便利なCSS | Tech de Go
レイアウト全体を中央に寄せる方法
http://japan.internet.com/column/busnews/20070913/8.html
Background Image Maker