「サイト訪問者の目線で考えるサイト作り」記事のメモ:phpspot開発日誌
第1回 サイト訪問者の目線で考えるサイト作り | Web担当者Forum 「サイト訪問者の目線で考えるサイト作り」という記事があって、その中で印象に残った部分をメモ。 ユーザーはナビゲーションをなかなか見ない ユーザーは、あくまでサイトの「コンテンツ」を見に来ている ユーザーは、まずコンテンツエリアを見ようとする 呆れるほど文章は無視されてしまう 長文は極力さけ、段落を区切った記述を行う 1段落は3行以内に収める 表や箇条書きによって、簡潔なリストアップを行う 文章はほとんど流し読み フッターへのリンク配置は効果大 →次へのリンクが提示されていないと、ユーザーは容易にサイトから離脱してしまう ＷＥＢ開発者にとって、こういうことは頭に入れておくとサイト作りに役立ちそうですね。 記事は、ユーザビリティにおいて実績のある beBit による執筆だそうです。
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
JavaScript＆CSSで独自デザインのselectボックスを作成:phpspot開発日誌
Script.aculo.us Select Box This javascript class allows you to add nice styled select boxes in a HTML page. JavaScript＆CSSで独自デザインのselectボックスを作成。 チェックボックスとかラジオボタンの独自デザイン仕様にする方法はいろいろあったものの、selectボックスの独自デザイン仕様にする方法はそういえば無かったですね。 prototype.js ベースで script.aculo.us を使い、次のイメージのようなselectボックスを作るライブラリが公開されています。 選択項目の内容はAjaxで取得できるようです。 レスポンスが遅い点と挙動が通常のselect ボックスと違う点で操作に違和感がありますが、多少の修正で通常のselectボックスと同様に出来そうな
いろいろな用途で使えるミニアイコンあれこれ - GIGAZINE
通常のアイコンよりも小さなサイズの使いやすいミニアイコンを集める必要性に迫られたので、いろいろとリストアップしてみました。 ブログやWiki、通常のサイト作成やFlash、PowerPointのプレゼンテーションやソフトウェアのボタンなどなど、いろいろな場面で役に立つはず。ボタンの画像を違うものにするだけでだけでも、割と雰囲気がガラリと変わるのでオススメです。 リスト一覧は以下の通り。 Mini Pixel Icons（ブログやCMS用のアイコン、ユーザーアイコンなどが多く、とてもカラフル） Mini Icons | urlgreyhot（12ピクセル四方という極めて小さなアイコンがいろいろあります。グレイスケールのアイコンは加工しやすいので、好みのアイコン素材にすることも可能） Bullet Madness - free bullets project at Stylegala（200個
WebデザイナーのためのFirefoxエクステンション20個:phpspot開発日誌
20 FireFox Extensions That Every Web Designer Should Know About - CyberKnowledge Blog WebデザイナーのためのFirefoxエクステンション20個。 どれも便利なエクステンションばかりでまさに、Webデザイナー必須のエクステンションですね。 Web Developer Toolbar - 定番のエクステンション。CSSオフ、ブロック要素を枠で囲むなどデザインには必須のツール。 AspellFox - スペルチェッカー RankQuest SEO Toolbar - googleでのサイト順位を得る OperaView - Firefox上でOperaプレビュー IEView - Firefox上でIEプレビュー Total Validator - HTML Validator SEO for
WEB制作・ファッション・インテリア・デザインに役立つカラー配色事典
・天然石ｱｸｾｻﾘｰｼｮｯﾌﾟ ・FKM Search ・ネットショップノウハウ ・FKM.WEB(WEB制作) ・ふくみみ猫と戯るる ・FKM PHOTO DL ﾌﾘｰ写真 ・猫まち！-携帯待受- ・猫ふり！-写真素材- ・猫と晩酌 ・NO! Scales計量ｶｯﾌﾟﾚｼﾋﾟ ・西の猫はキャンプ好き ・ドリーマンのスピニング・トーホールド 【PR】 国内最大エリアのインターネット回線。「フレッツ」 【PR】 【PR】 プライベートキャンプ場 始めました！ 九州の里山で プライベートキャンプ場 始めました！ 川あり山あり民家なしの 完璧な環境！ YouTubeチャンネルにて 公開中！ 【YouTubeチャンネル】 WEB制作 をする上で、避けて通れないのが「サイトデザイン」です。サイトの内容は決まっていても、どのようなイメージで、何色を基調にサイトを作るか。これが決まらないと先に進めません
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」:phpspot開発日誌
CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」 2006年10月04日- FreeStyle Menus Demonstration This script is a highly flexible means of converting HTML content into powerful popup menus, using either nested lists or DIV tags for menu data, and following best practice guidelines for powerful and accessible menus. CSSとJavaScriptでアニメーションがカッコいいメニューを実装「FreeStyle Menus」。 ブラウザ上で動くWindowsのメニュー風のUIは結構見かけ
320以上の高品質なミニアイコンがダウンロードできる「Mini Pixel Icons」:phpspot開発日誌
Mini Pixel Icons These mini icons are designed at 14x14px with transparent background. 320以上の高品質なミニアイコンがダウンロードできる「Mini Pixel Icons」。 再販禁止で、10個以上アイコンをサイト上で使う場合は http://www.ndesign-studio.com/ にリンクしなくてはいけない、というライセンスがあります。 リンクしたくない場合は30ドル払えばよいらしいです。 どれもWEBツールなんかに使えそうないい感じのものばかりなので、利用規約に沿って、使わせてもらうのも良いでしょう。 SILK ICONS なんかもクリエイティブコモンズで広く使われていますね。
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』:phpspot開発日誌
CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』 2006年10月01日- Transcorners ? Cornerus Pride is there *scared* Well, Nifty technogy is used. There are small stripes appending inside of an element which create an illusion of transcorn. CSSとJavaScriptでブロック要素の角を自在に操るライブラリ『Transcorners』。 mootoolsをフレームワークとして使用しています。 次のように、左下の大きな角丸や、右上の一部切り取ったような角も簡単に実現できます。 大きな角丸を作るには、radiusというプロパティを大きく指定することで実現できます。 この
CSSの小技集、20個:phpspot開発日誌
CSS Techniques Roundup - 20 CSS Tips and Tricks I never cease to be amazed at what problems can be solved with pure CSS. CSSの小技集、20個。 どのテクニックも、誰もが使うであろうテクニックで便利なものばかりです。 角丸 画像なしの角丸 投票用スターの作成 テーブルなしのフォーム リストをＣＳＳでデザイン 2カラムレイアウト 3ラムレイアウト 3カラム固定幅、中央寄せ 印刷とＣＳＳ RSSフィードにスタイルシートを指定 固定フッター 要素にHoverエフェクトを加える HRタグへのCSS ＦｌｏａｔのClearに関するテクニック CSSでポップアップ小窓 ボックスの見出し(Box Punch)を表現 CSSボタン オレンジのRSSボタンをP
CSSを書く際の5つのテクニック:phpspot開発日誌
CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はインデントして読みやすくしよう h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } 確かに、これは分かりやすいかもしれません。今後導入しようと思います。 3. セクションごとにコメントを入れて構造化しよう /* Structure */ ...
ロゴ・イラスト系ビットマップ画像の拡大処理ツール『MugenViewer』
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.
厳選10本！ブログで使えるスグレモノツールまとめ :: Love & Design ::
プロのWebデザイナーじゃないけど、ブログをもっとカッコよくしたい！もっとオシャレに見せたい！という方のために、これまで紹介したブログで使えるスグレモノツールをまとめてみました。 便利なフリーソフトはたくさんありますが、この中でお気に入りが見つかるとうれしいです。 名付けてsweetloveパック（livedoor風味） 画像系 ImageChef（日本語・携帯にも対応） ワンポイントや mixi のプロフィールにどうぞ 画像が簡単にできるジェネレーターいろいろ :: Love & Design :: Polaroid-o-nizer™ ポラロイド風や枠をつけてオシャレに演出 写真をオシャレに見せたい人のための便利なツール :: Love & Design :: デザイン系 Dynamic Drive CSS Library タブメニューなどが豊富に揃っています。 誰でも簡単にCSSカスタ
CSSデザインのページを作る際のスタイルガイド:phpspot開発日誌
Drinking Rockstars and Programming Creating a Style-Guide for your site One thing you'll realize after you do alot of front-end work is that after you don't work with the CSS and HTML for a few days, you'll forget the classes that you defined and end up writing alot of similar CSS styles.サイトをCSSで綺麗に作っても、時間が経つとそれぞれのidやclass定義について忘れてしまいます。 時間が経ってからデザインを修正する場合、CSSの見直しや、実際の見栄えについて確認するのに手間取ってしまいます。 そこで
CSSオンリーでクールなグラフを書くサンプル集:phpspot開発日誌
Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height
高品質でフリーのウェブサイトテンプレート集「TemplatesBox.com」 - GIGAZINE
通常のウェブサイトだけでなく、Flashサイトのテンプレートやロゴマークのテンプレート、バナーやボタンまで置いてあります。これらがすべてフリーというのが驚き。全部で200個以上あるようです。 TemplatesBox.com http://www.templatesbox.com/ ウェブサイト用テンプレートは利用したPSDファイルやフォントも同梱されており、DreamweaverかFrontpageで編集しやすいようにできています。 ウェブサイト用テンプレートあれこれ http://www.templatesbox.com/templates.htm ロゴデザインのテンプレートはPSDファイルとフォントファイルが同梱されています。親切。 ロゴデザインのテンプレート http://www.templatesbox.com/free-logo-templates/index.htm ウェブサ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
80種類のフリーのテンプレート配布とチュートリアルサイト「Zymic」:phpspot開発日誌
http://www.u-ziq.com/blog/atom.xml
もう一つのWeb2.0なロゴメーカー「Web 2.0 Stylr」:phpspot開発日誌