この資料についての説明と謝罪 この資料は公開時より24時間内において他サイトの内容を無断で使用しておりました。 これに関して、kzは以下のエントリにおいて説明及び謝罪をしております。 社内勉強会の資料についての説明及び謝罪
そのままですが、Mashableで「Forget Photoshop: 15 Online Graphics Generators」が紹介されていました。 これはメモしておかねば。 Buttonator ボタンがいろいろ作れます。設定がいろいろあって良いですね。 RoundedCornr: Rounded Corner and Gradient Generator いわゆる角丸パーツを作れます。 Web 2.0 free buttons maker! 2.0っぽいボタンが作れます。 glassy buttons こちらもボタンジェネレータ。 Ajaxload – Ajax loading gif generator Ajaxのローディング中のパーツが作れます。 Web2.0 Logo Creator by Alex P Logo Maker : Web 2.0 Stylr 2.0っぽいロゴ
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。(上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。) 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
日本航空の鶴を使ったマーク、ティファニーの広告デザイン、楽器メーカーであるナカミチのコンセプト設計――これらのすべてに携わった日本人のデザイナーを知っているだろうか。米国ニューヨークに本拠を置くKatsuji Asada氏がその人だ。世界的なブランドのデザインやアートディレクションを数多く手がけるAsada氏が、新たな活躍の場としてウェブの世界に飛び出した。 インデックス・ホールディングスとサイボウズの共同出資会社であるZINGAが開発したビジネスパーソン向けのコミュニケーター「Zinga」。PCと携帯電話の両方に対応し、メールや電話などビジネスパーソンが業務に必要な連絡をすべて一カ所で取れるようにしたサービスだ。Asada氏はこのサービスのアートディレクターを務めている。 ZINGA代表取締役社長の大森洋三氏と旧知の仲であったことから実現した今回の企画は、インターネットサービスのデザイン
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo!やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLやCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか?ウェブを回って集めた、フッターが目を引く19サ
色って何かと迷いますよね。センスだけでできればいいのですが、なかなかそうもいかないもの。そこで色の理論から、色が心理に与える影響までを網羅した資料をご紹介。 以前ご紹介した「これで完璧!ロゴデザインのためのお役立ち資料まとめ」と同じシリーズですね。 色に迷ったときにかなり使えそうですよ。詳細は以下からどうぞ。 いろいろ網羅されているのですが、いくつか気になるトピックをピックアップ。 ↑ 色関係の使えるオンラインツールいろいろ。 ↑ デスクトップから使えるツールもいろいろ紹介されています。 ↑ 色が心理に与える影響について。大事ですよね。 念のため、全部のカテゴリーをあげておきましょう。 Color Basics (色の基本) Color Psychology & Meaning (色が心理に与える影響および色の意味) Color Science & Theory (色の理論) Color
飛び出す絵本はいいですよね。驚きがあります。最近は実に精妙なものもできているらしいですね。 そんな飛び出す絵本を超える驚きがあるのが今回ご紹介する『Book of Lights』。 名前からある程度想像できますが、以下に写真でその驚きのギミックをご紹介。 ↑ 一見、普通の本ですが・・・。 ↑ こうやって開いていくと・・・。 ↑ なんとランプが現れます! ↑ 完成形はこちら。もちろん照明としてきちんと機能します。 本棚からこれを取り出してちょっとした照明に使ったらおしゃれですよね・・・。おしゃれ以上に驚かれそうですね。 発売前ですが、先行予約は受け付けているそうですよ。お値段は$86です。 » Book Of Lights By Takeshi Ishiguro For Artecnica – Home Furnishings – Unica Home
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、1つの値
色彩構成を決めるのはなかなか難しいものがありますが、この「ColorJack: Sphere」を使えば、色彩の理屈にぴったり合った感覚のみに頼らない正確な色彩構成が可能です。 詳細は以下の通り。 ColorJack: Sphere 例えばこの「Neutral」なら連続した色を簡単に選ぶことができます 「Analogous」ならもうちょっと間隔を開けて選択するので色彩に幅ができます 「Clash」は補色の関係を考えるのに使える 「Six-Tone」あたりは割と使いやすい 「Websafe」にするといわゆるセーフカラーのみで選択可能になります 元々の色の組み合わせ自体をスペクトラム風以外にもいろいろと変更可能で、カスタム設定すればこんなことも可能です
ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能
サイトやブログなどのWebデザインを変更したくなるときがあります。 では、一体誰のためにWebデザインを変更したいのでしょうか? 多くの人は、Webデザイン変更を以下の目的のために実行するものだと思い込んでいます。 1.自分のためにWebデザインを変更する 2.他人のためにWebデザインを変更する この思い込みによって、Webデザイン変更が裏目に出ているケースが多々あります。 大別すれば上記2通りだけなのかもしれませんが、実際はもう少し細かく分けた方が失敗が少なくなります。 1.誰のためにWebデザインを変更するのか? では、一体誰のためにWebデザインを変更するのか、以下の4通りに分けて考えてみましょう。 1.自分のためにWebデザインを変更する 2.コンピュータ(検索エンジン、ケータイ、読み上げブラウザなど)のためにWebデザインを変更する 3.他人(既存ユーザー)のためにWebデザイ
Copyright (C) Mainichi Communications Inc. All rights reserved. 掲載記事の無断転載を禁じます
Firefoxは、Mozilla Foundation(日本法人はMozilla Japan)を中心にオープンソースで開発され、無償でダウンロードできるWebブラウザだ。Windows / Linux / Mac OS Xに対応している。複数のWebページを同じウィンドウ内でタブごとに切り換えて表示する「タブブラウジング」や、ブログの更新情報などを受信する「RSSリーダー」といった先進的な機能をいち早く開発してきたことから、Webアプリケーションの開発者(以下、単に「開発者」と記す)を始め、様々な層のユーザーから支持されている。Firefoxの世界シェアは、2007年2月現在、米Net Applicationsによる調査では14.18%となっている。 もう一つ、Firefoxが支持を集める理由として、アドオンによる拡張機能が豊富に提供されていることが挙げられる。拡張機能はMozilla自
ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く