ウェブデザイナーの固定概念をぶっつぶす１０の方法 – vanillate
Six Revisionsの2010年９月の記事、 「10 Practical Ways to Bust Through Web Designer’s Block」を やっと読みました。 英語の記事で、鮮度は低いですが、 もう一歩ウェブデザインを前に進めたい私としては 非常にエキサイティングな内容でした。 以下は、意訳や直訳ではなく、私のメモです。 （１）逆にして考えてみる ・グリッドでひかれたファイルを大きなカンバスだとおもってはじめない ・ボタンなどの細かいディテールからはじめる ・色にはこだわらない （２）問題点を先に考える （３）コードが先、デザインが後 ・ブラウザの中で考える、フォトショップはあと。 ・スライドショーのようなjqueryを先に書く ・フォーム（デザインはとりあえずきにせず）のエラーバリデーションや、 どんな注意事項がほしいかを考える ・カスタムワードプレステーマで
The Power Play Continues - Yanko Design
This is so simple. Continuance is a set of batteries with a USB interface on the side. The batteries are rechargeable plus dole out some juice to stranded gadgets that are starved of power. Handy, compact and a totally do-able concept! Kudos! Continuance is an iF concept design entry for 2011 Designers: Haimo Bao, Hailong Piao, Yuancheng Liu & Xiameng Hu
ChromeはCSSで設定しないと禁則処理してくれない : 元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
行末の「。」が先頭にきてしまうことがあるのはChromeだけだったのかな？ で、さすがに気になったので調べてみると、CSS表記で解決できることがわかった。 ちなみに、行頭に「。」が来るのを禁止することを禁則処理といいます。 修正前の状態 つまりはbodyにCSSで禁則の指定をしてあげる。 そのCSSは以下のとおり。 □ Chromeの行頭禁則がアレなのを解決 - たけみたの脱社会学日記 body { word-break: normal; word-wrap: break-word; } それぞれ解説すると。 「word-break」は改行をどう扱うかの設定。 それぞれ、以下のような指定ができる。 □ word-break−スタイルシートリファレンス normal 英語等は単語の途中では改行せず、単語の切れ目で改行されます。日本語・中国語・韓国語等は表示範囲に合わせて改行されます。このため
デザインのなかにある魔法と活用の仕方
2010年の iPad のプロモビデオ。この辺から「Magical」という言葉をよく聞くようになった印象があります。 先月再開したポッドキャスト「Automagic」には「Magic（魔法）」というフレーズが含まれています。名前の由来についてはぜひエピソード１を聴いて欲しいですが、魔法という言葉をここ1年よく耳にするようになった印象があります。iPad のようなハードウェアだけでなく、何気なく訪れる Web サイトなど、私たちの周りにはたくさんの魔法が存在します。私たちのように技術や仕組みに深く入り込んでいる人間からすれば、大したことのないと感じることでも利用者の視点からすれば魔法のようだと感じることは幾つかあります。 Twitter の会員登録プロセスをみてみましょう。 登録を済ませるとワンクリックで友だちを見つけだし、その場でフォローをすることが可能です。ひとりで初めても楽しくない T
Zen Codingの便利な機能 | Zen Coding 3-2 | HTML+CSSコーディングが10倍速くなるZen Coding
Zen Codingには、便利な機能がいろいろあります。 これらの便利な機能をタグ入力支援機能と組み合わせることで、快適な高速コーディングが実現できます。 コメントのオン・オフの切り替えHTML/CSSコーディングでは、ページやコードの中にブラウザーでは表示されないようにしてコメントを入れておきたいことがあります。その場合、HTMLでは「<!-- コメント部分 -->」、CSSでは「/* コメント部分 */」のように、それぞれタグで囲んだ範囲を非表示のコメントに指定する記述をします。 Zen Codingには、選択した範囲を非表示のコメントにしたり、逆に解除したりする機能があります。範囲を選択して［Toggle Comment］メニューを選択するか、＋＋キーを押す※と、コメントのオン・オフの切り替えがかんたんにできるようになっています。 ※秀丸エディタでは別マクロのインストールと設定が必要
Webutubutu!-Older: ナビゲーションの基本レイアウト
ユーザビリティの観点から考えると、他のサイトと類似性の高い方が利便性がよいといえます。 簡単にいえば、慣れが重要だということですね。 では、多くのユーザーが慣れているレイアウトとはどんなものでしょうか？ ナビゲーションの種類 レイアウトするにはどのようなナビゲーションがあるかを予め決めておかねばなりません。 サイトによっていろいろと変化はあるでしょうが、基本は以下のように分かれます。 グローバルナビゲーション ローカルナビゲーション 機能ナビゲーション 関連ナビゲーション 以下、簡単な説明です。 グローバルナビゲーション 名前の通り、全体に関わるナビゲーションです。 ラベルにはサイトの中心となる内容を記載し、サイトのどのページでも常に表示することが基本。 分類としては大分類でありサイトの中でも大きな概念を表現しています。 極論すれば、グローバルナビゲーションを見ることによりこのサイトがどう
わずか数秒で自分用のHTML5のテンプレート一式を作成するオンラインサービス -Initializr
HTML5でサイトを作成する時に必要なHTML5の雛形、jQuery, Modernizrなどのスクリプト、CSSのリセットなど一式を自分用にカスタマイズして作成できるオンラインサービスを紹介します。 Initializr - Start your HTML5 project in 15 seconds! [ad#ad-2] InitializrでHTML5のテンプレート一式を作成する方法 HTML5用のテンプレート一式を作成するのは、わずか数秒で簡単にできます。 トップページにアクセスし、4つの選択項目から自分の必要なものをチェックし、最後に「Download」をクリックするだけです。 Initializr - Start your HTML5 project in 15 seconds! 選択項目のキャプチャ [ad#ad-2] Initializrで作成されるHTML5のテンプレート
WordPressをカスタマイズするなら絶対覚えておきたいテンプレートファイルの使い方
WordPressを使い始めた頃は、テンプレート階層、テンプレートファイルの上手な使い方などは、全く考えずに Webサイトを作ってました。 いまではもっと効率的に、もっとスマートにサイトを構築できるようになったかも！そのためにちょっと覚えておきたい、テンプレートファイルについてのあれこれをご紹介します。 WordPress というと、ブログ構築のための CMS（コンテンツマネージメントシステム）というイメージが強いですけど、一般的な Webサイトを作るの時にもとっても便利です。私も仕事で Webサイトを作る時に、WordPress で作成することがとても多いです。 WordPress はバージョンも 3.0 になって、カスタム投稿タイプやカスタムメニューなど、さらに CMS としても充実してきたように思います。 ブログと違って一般的な Webサイトは、そのサイトによって仕様が様々です。コン
国内Webサイト参考デザイン一覧集 | Maka-veli.com
ん？タイトルの日本語、なんかおかしい？(笑) 自分用に、国内のWEBサイトサンプル集をメモ。 やっぱ国内のが参考にしやすいですよね。 ズロック http://www.zzrock.net/ 一番お世話になってます。 検索も楽です。 そしてサイト自体のデザインも好きです。 (黒×黒のロゴとかやっちゃうとこがまた良い) iKeSai.com http://www.ikesai.com/ なんか気楽に見れる。見やすい。 WEBdeDB http://www.webdedb.com/ 更新減ってきたけど、数多い。 (Faviconつけてほしいー…) WEBデザインの見本帳 http://www.web-mihon.com/ 印象から検索できるのは嬉しい。 サイトがかわいい。 webselection http://web-selection.com/ シンプル。み
foodfoto inc.のサイトを制作させていただきました。 - Fjord, Inc(株式会社フィヨルド)
@func09さんが立ち上げた会社「foodfoto」の会社サイトをフィヨルドで制作させていただきました。 そもそも僕も@komagataさんもラペコをオープンのときから応援してたファンだし、@func09さんのはてブがたくさんついたエントリー「自分でWebサービスを作ってたら起業することになりました」には@komagataさんが出てくるし（その前のエントリーには僕が出てくるのですが、はてブの差がひどい！）、フィヨルドでやったつくる社創業お祝い会に遊びに来ていただいたし、イベントでもよくお会いするしで、@func09さんが会社を始めたっていうだけでフィヨルドはもう祭りなのに、その会社のサイト制作の依頼をいただいてしまいました。 しかも、@komagataさんが作ってるCMSのLokkaで、というありがたい注文付き！ さらに、powerd by Lokkaも格好良く載せて、と！ そのサイトが
Androidサイトは横幅何pxで作ればいいのか？ - さくペラ
いくつかAndroidサイト制作の仕事をしていて、いろいろandroid機種でデバッグをして気づいたことがあります。 その中で一番はまったのが、「Androidサイトは横幅何pxで作ればいいのか？」という点です。 今では解決方法を見つけたので以下、まとめます。 Androidのデフォルト解像度について Androidサイトを作る際、横幅何ピクセルで作ればいいのかなあと思い、Android機種の解像度一覧の表を探すと思います。 ただ、その情報を鵜呑みにしてサイトの横幅を設計すると、失敗することになるのです。 なぜなら、「機種自体の解像度性能は高くてもwebブラウザのデフォルトの解像度設定が低くなってるケースが多いから」、なのです。 たとえば、IS03は640*960という解像度を持ってますが、viewportでサイズを指定しないで表示したときの横幅は、320pxなんですね…。 android
インプレスブックス - 本、雑誌と関連Webサービス
個人でも達成できる実践ノウハウ、教えます 発売日： 2024/2/6 好評発売中 Web作成・マーケティング 詳細を見る
論理的なHTML（文書構造）を意識してつくるWebデザイン（CSS）… とSEO
デザインが先にあって XHTML を書こうとすると、論理的な文章構造殻から見たときにおかしなことになることがあります。 コーディングに慣れないうちはこういう失敗もよくありますねー。 正しい文章構造でマークアップをすれば SEO的にもいいかもしれません。 今更なんですけど、Webサイトって XHTML で書かれていて、スタイルシートで装飾されていますよね。Webデザイナーから見ると、Webサイトってとかく見た目、デザインの部分、スタイルシートばかりに目がいきがちですが、Webサイトで大事な部分ってXHTMLの文章の論理構造だったりします。まずは XHTML があっての Webサイトだと思うんです。 Webサイトを作るときに、多くの Webデザイナーさんがそうしてると思いますが、私もまず Photoshop や Fireworks をつかって Webサイトのデザインを作ります（みんな違うのかな
Webutubutu!-Older: MacとWin。フォント表示の違いによるレイアウト崩れ。
MacとWinでフォント表示の違いによるレイアウト崩れが見られる件について。 ブラウザでWEBサイトを閲覧する際、フォントの表示違いの話は良く出ます。 フォントのアンチエイリアスなどもデザイン的に大事な話ではあるのですが、それ以上に大きな問題がレイアウト崩れです。 状況 見た方が分かりやすいので、下記をどうぞ。 このブログの右サイドにあるナビゲーション部分です。 左がMacで右がWin。どちらもFirefoxで表示しました。 ご覧のように明らかな違いが出ています。 レイアウト崩れの問題点 簡単に言えば、日本語のひらがなカタカナ部分の字間（文字と文字の間の部分）が違うようです。 アルファベットや漢字の部分にはそれほど違いが感じられません。 CSSでletter-spacingを用いて詰めてしまうと、ひらがなカタカナ部分は良くても他の字間がつまり過ぎます。 個別にspanなどのタグでくくる方法
携帯サイトのデザイン参考サイトまとめ -歌って踊れるプログラマー
年末から、携帯サイトを構築しています。 え、スマートフォンやiPhoneジャネーノ！？とか言わないでください。 デザインができないので、参考になるサイトを探しつつ、自分用にまとめてみました。 モバイルサイトデザイン集のモバイルデザインアーカイブ By ニューインデックス株式会社様 オススメ度： ★★★★★ 掲載数 ：★★★★★（約1700サイト／2010年1月現在） コメント ：圧倒的なサイト数の多さ！そしてカテゴライズされているので見やすいです。 ▼一覧ページ。 モバミル イケてる携帯サイトデザイン By 面白法人KAYAC様 オススメ度： ★★★★★ 掲載数 ：★★★★★（約600サイト／2010年1月現在） コメント ：3キャリア分の画面キャプチャがあり、各キャリアの絵文字の表示の違いなどが非常にわかりやすいです。 ▼一覧 ▼QRコードと、３キャリアの表示の違いが見れま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design Juices
Metalab | We make interfaces
Webutubutu!-Older: ページに統一感を出す方法
株式会社HIT 帽子の仕入れ・帽子専門の卸売販売
Webデザインのタネのタネあかし〜デザインコンセプト編 | Webデザインのタネ
