デザイン視覚の参考に。緑と赤のBESTサイト全６０サイト＊ホームページを作る人のネタ帳
Web サイト制作時の参考文献リスト
完全に自分用メモ代わりですが、Web サイト制作時に参考にする機会の多いドキュメントをまとめてみました。とりあえずは仕様書関連のみ。 英語で書かれたドキュメントばかりを並べてもなんなので、参考までに日本語訳されたドキュメントも私が知っている範囲内で併記してみました。ただし、日本語訳は完全に原文との整合性を保障するものではありませんので、あくまで参考までにご利用ください。 HTML 関連 HTML 4.01 Specification -W3C Recommendation （日本語訳） ISO/IEC 15445:2000(E) ISO-HTML （日本工業規格 JIS X 4156:2000） ISO-HTML: Entities, element types and attributes (DTD) W3C から勧告されている、HTML 4.01 の仕様書に関しては現状、(X)HTML
Lightbox.js のような写真のスライドショーするライブラリ沢山：Goodpic
This shop will be powered by Are you the store owner? Log in here
リーズナブルながら高品質、第2世代Apple Pencilを保護する超薄型シリコンカバー|ITライター・山口真弘の気になるグッズラボ|プロダクトに出会う
ITライター・山口真弘の気になるグッズラボ リーズナブルながら高品質、第2世代Apple Pencilを保護する超薄型シリコンカバー ～AHAStyle「JPPT65」レビュー 2019年03月12日 TEXT：山口真弘（ITライター） 新しいiPad Proの発売に伴って、第2世代へと進化を遂げたApple Pencil。充電方法についても、キャップを取り外してLightningポートに直接差し込む仕組みから、iPad Pro本体に吸着させてワイヤレスで充電する仕組みに改められるなど、大幅な進化を遂げています。 もっとも、従来モデルと違ってiPad Proに吸着させる必要があることから、テープをぐるぐる巻いて持ちやすくするなどの工夫がしづらくなったのも事実です。それだけに、充電機能を邪魔せず、また新機能であるダブルタップでのツール切替機能にも影響を与えないサードパーティ製品の登場が待望さ
photoshop- 1ピクセルラインで質感を高めるテクニック - WEBデザイン BLOG
下記の画像はこのサイトのトップページの画像です。両者の違いは、1ピクセルのラインが入っているか、いないかの違いです。左の画像はピクセルラインあり、右側はラインなしです。（画像クリックすると原寸表示されます。） ピクセルラインを入れることで、立体感を演出することができ、さらに質感を高めることができます。 さらに拡大した画像も下記の画像をクリックすることでご覧いただけます。
ブレインストーミングの７つの秘訣: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ブレインストーミングができるホットなチームが欲しいなと切に思う今日この頃。 自分自身のメモのためにも、トム・ケリーの『イノベーションの達人－発想する会社をつくる10の人材』より「ブレインストーミングの７つの秘訣」。 1.焦点を絞るいろんなアイデアが数多く出るように、焦点を絞った具体的な質問がブレストには必要だそうだ。「潜在的な顧客ニーズや、顧客経験のどこかの段階といったテーマに焦点を絞ると、いいアイデアが頻出しやすい」と、トム・ケリーは書いています。 2.ルールを意識するブレストを効果的なものにするには、「量を追求する」「大胆なアイデアを歓迎する」「視覚的に表現する」「独断的にならない」「話題は一度に一つ」といったルールを守る必要がある。IDEOではこのルールを会議室の壁の
色で選べる Web デザインギャラリーまとめ
Web デザインを考えるとき、色彩のイメージはとても大切です。配色のヒントは Web 上だけではありませんが、配色に悩んだときに便利な、色で選べる Web デザインギャラリーをまとめてみました。 イメージに合った色の選び方や、レイアウトもとても参考になります。
ウェブのテキストがもっとも読みやすい文字色と背景色は？ | POP*POP
1997年の研究ではありますが、「ウェブ上のテキストがもっとも読みやすいのはどういうとき？」なるものが紹介されていました。 » Web page readability: Green text on yellow works the best この研究では、フォント、色、スタイルをいろいろ変えてどの組み合わせが読みやすいかを調べたようです。 いくつか参考になりそうな結果があったのでご紹介していきます。 では早速その研究結果から。 もっとも読みやすかったのは「黄色の背景」に「緑の文字」だそうです。ただしフォントが斜体のArialのときはこの組み合わせは最悪だそうです。 Times New RomanのほうがArialより読みやすい。 フォントも合わせて考えると「Times New Romanで、斜体で、黄色の背景で、緑の文字」が一番読みやすかったそうです。 ↑ こんな感じですね・・・。 「グ
the OYAKONEWS@Hatena - テキストの画像化
曇り。黄砂が舞い降りてきた。ジョギングは止めた方がよいかも。 改めて、テキストの画像化に伴う問題点を、余り熱心に読まなくても理解できるように箇条書きにする。 メリット テキスト投稿に伴う規制をエスケープできる。 言語環境に関係なく表示させることが出来る 画像ファイルを差し替えることでHTMLソースをいじらずに表示内容を変えることが出来る。 たいした知識がなくても凝った表示をさせることが出来る。 画像と文字をほぼ自由に疑似レイアウト出来る。（追記: 2007-04-03） デメリット 簡単にコピーアンドペーストができなくなるから、引用、言及されにくくなる。 検索で見つけ出すのが困難になる。 画像解像度に依存するのでアクセッシビリティが低下する 適切なマークアップが出来ない。 閲覧者の環境やブラウザの設定により、作成者の意図が伝わらないことがある。 ダウンロードされて二次利用される可能性がある
ユーザーの声を拾いあげる効果的な『お問い合わせフォーム』 | ランサーズ社長日記
いいね！ 0 ツイート B! はてブ 36 Pocket 2 ベータサービスはユーザー公開してからが勝負である。ユーザーの声に迅速に答え、最初に投入したコア機能部分にうまく「声」を肉付けしていけば、よりよいサービスへと近づいていく。 しかし、そもそもの【ユーザーの声】自体を拾い上げるのも難しい。そこで、今回は「お問い合わせフォーム」に絞って、非常に簡単だが意外と実践されていないいくつかの、ユーザーの声を拾いあげる効果的な『お問い合わせフォーム』を考える。 問い合わせフォームとその周辺のTIPSをまとめてみました。参考になればと思います。 １．お問い合わせフォームを設ける ２．お問い合わせフォームに不要な項目は付けない ３．すべてのページからお問い合わせフォームへリンクをする ４．お問い合わせをmailtoだけで行わない ５．しかし、mailtoのお問い合わせも用意する ６．問い合わせには必
検索結果がゼロだった場合の対処 (ユーザビリティ実践メモ)
規模の大きいショッピングサイトや求人、旅行、不動産などの情報サイトでは、価格帯や機能などの条件指定による検索や、フリーワードの検索機能が提供されています。 ただ自由度が高い反面、想定通りの検索結果が返ってくるとは限りません。 複合条件で絞り込んだ場合などは、検索結果が1件も表示されないことが頻繁に発生します。 そのため、検索結果ページのユーザビリティが重要になりますが、この時の検索結果ページの表示次第では、望ましくないユーザ行動が起こります。例えば、以下のようなメッセージがただ無機質に表示されるウェブサイトもあります。 『検索条件に該当する商品は見つかりませんでした。』 次に向かうべき先が見つからない場合、多くのユーザは、そのサイトには希望するページが無いのだろうと判断してしまいます。そしてサイトを立ち去ってしまうのです。 検索結果が無かった場合には、まず条件に合致したページが見つからな
ペルソナは用途を狭くし、そして爆発的に広げる: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 yusukeさんのこの感覚、まず直感的にいうと、絶対的な真理をついていると思います。 ソフトウェアのパターン化というのは、その代替された業務だけみていると確かに制限にしか見えません。融通が利かないというか。しかし、そうしたパターン化があることで情報の流通性が非常に高まります。これまでは自由なフォーマットで書いていた手紙が、Eメールになることで世界中に届くようになったように。 直感的なだけだと話が成り立たないので、なぜ正しいと思うのかを整理してみます。 ペルソナというパターン化の手法まず、なぜ「パターン化が世界を狭くする一方で、それを爆発的に広げる」というyusukeさんの意見に反応したのかを述べておきます。 最近、ペルソナづいていて、いろんなところでペルソナ作成を提案してい
ひげぽん OSとか作っちゃうかMona- - ハッカー養成塾:ハッカーへの遠回り
オープンソースマガジン2007年1月号に向けて書いた記事の元の原稿です。 前回のアルファギーク舘野君から、バトンを渡されたひげぽんです。 Mona OSというオープンソースOSを開発しています。 僕はハッカーと呼ばれるには実力不足ですが、知り合いのスゴ腕ハッカーに少しでも追いつこうと日々実践していることをいくつか紹介します。 ハッカーに学ぶ オンラインでもオフラインでも構いません、自分よりも優れているハッカーを探してお手本とすることから始めましょう。 彼（または彼女）が何を勉強し、発言し、考えているかを観察することで多くのことを学べるはずです。 周りにハッカーがいなければ、勉強会・カンファレンスに参加したり、ブログを利用してコミュニケーションをとるのもひとつの方法です。 「ハッカーに交わればハッカーになる」とまではうまくいきませんが、周りは自分より優秀な人ばかりであるという環境を作り上げる
日本社会で起業するため本当に必要な9つのモノ - GIGAZINE
～目次～ ■ブルーオーシャンなんてどこにもない ■それはロングテールではなくてただのニッチ市場 ■その会社は何年続くのか ■お前が死ねばその会社は終わる ■代表取締役とCEOと社長は違う ■足し算と引き算ができるかできないか ■ロジックが正しくても利益は出ない ■世の中には会社がたくさんあるという現実 ■挫折から立ち直る方法は挫折することでしか得られない ■あなたが起業するために必要なモノ 以前にインタビュー記事を掲載した「ビジネスプランコンテストSEEKS」、これには実際にGIGAZINEも審査員として参加し、全部で12チームの出したプランを見ていったわけです。で、終了後に交流会があったりと、いろいろな起業を志望する人と交流ができたわけです。 その中で感じたことを以下、まとめていきます。ホリエモンによっておそらく本格的に火がついたというか、注目されてきた就職以外の「起業」という選択につい
404 Blog Not Found:あなたが起業するのに本当に必要な9つのモノ
2007年03月31日16:30 カテゴリArtMoney あなたが起業するのに本当に必要な9つのモノ 「日本社会で起業するため本当に必要な9つのモノ - GIGAZINE」に対する返事。 目次 はじめに ブルーオーシャンなんてあなたには必要ない やつらのロングテールはあなたのヘッド そのプロダクトは何日後にリリースされるのか お前が死ねば別の誰かがとってかわる 代表取締役とCEOと社長と社員はあなた 掛け算と割り算をあきらめられるか ロジックが間違っていても利益は出る 世の中には仕事がたくさんあるという現実 挫折から立ち直るのに方法なんてない あなたが起業するために必要なモノ はじめに ここでの話題は、「起業」です。読んで時のごとく「業を起こす」ことです。会社を起こすことではありません。それは「起社」と本来呼ぶべきでしょう。起業するのに会社が必要なんて誰が言ったのでしょう? 起業はまた「
シニア層はなぜインターネットを使えないのか？その１ - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
若者のウェブサイト操作とシニア層のウェブサイト操作には天と地ほどの違いがあります。月とすっぽん、ダイヤとタイヤ。そのくらい、違います。 わからない言葉が出てきた場合、若者は無視するかクリックするかのどちらかになります。が、シニア層はわからない言葉をしばし見つめて、「どういう意味なのかしら」と考え出します。そして「やっぱりこのホームページは私には難しいわ」。 年をとると視野も狭くなり、若者のように全体的にウェブサイトを俯瞰することができなくなります。さらに網膜にメラニン色素がたまるため、全体が黄みがかった様子になり、色の差がはっきりしないと見えにくくなります。また、若者が捉える「落ち着いた色」は「暗い色」になります。 技術的にも「使える人」と「使えない人」には雲泥の差があります。 例えば別ウィンドウが開くという操作において、若者は「どのウィンドウがどの内容を表示しているのか」を瞬間的に判断で
「これくらいできるわよー」 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
随分前から通っているIさん（７６歳） インターネットが「全然解らない」と１年前に仰って、ひたすら１年インターネットを「勉強」した。 画面構成が変わると「前と同じページにならない」 検索順位が変わると「前と同じ番号のところにめざすものがない」 買い物講習に出ると、買い物の仕方を全て書き取る。だから、応用が利かない。 練習と称して蟹を買う。でも、他の所はわからない。 昨日、久しぶりにIさんがいらした。 ｢怪我しちゃってね｣ 「ところで、最近私、インターネットがなんとなく解ってきた気がするの」 「やりましたね！」と喜ぶスタッフ 「まあたいしたことじゃないのよ、でも、この間、椿山荘の夜桜パーティ申し込めたのよ、インターネットで。まあ、あれくらいはできるかな」 私たちは、彼女が「あれくらい」と仰ったことに驚いた。 そう、いつもいつも驚くのだが、自分の思う通りに動いたサイトは「あれくらいはできるわよ」
40 Excellent Free Fonts For Professonal Design — Smashing Magazine
The importance of typography in design can’t be overestimated. The accuracy, precision and balance of geometric forms can give letters the elegance and sharpness they deserve. Besides, elegant fonts can help to convey the message in a more convenient way. In fact, while there are many excellent professional fonts there are literally thousands of free low-quality fonts which you would never use for
Free Design Templates | Developer's Toolbox | Smashing Magazine
If you are hesitant about choosing the perfect template for your website, then maybe it is high time to stop browsing and order one for yourself. To simplify this process, you should employ a professional RFP template for software development. One of the best things you can do when choosing a theme is to learn about the person or company who made it. If they have a reputation to live up to, then t
Truwex Online, Web Accessibility Testing Tool: WCAG, Section 508 compliance
Truwex manages website compliance with web accessibility, online privacy, and quality standards. Truwex is a web governance and testing solution, all in one product. Web compliance managers can use Truwex to: Define a uniform website standard. Monitor compliance status and automatically generate reports for upper management. Set action items for website owners and web developers. Web develope
選択可能なアンチエイリアス文字を出力する『sIFR 2.0』導入メモ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 sIFR（Scalable Inman Flash Replacement）は、HTML上の任意のテキストをJavascriptでFlashムービーに置き換え、アンチエイリアスが掛かった選択可能なテキストとして表示する手法。Shaun Inman氏が世に広めた技術で、海外では割と普通に使われています。 見た目はCSSによる画像置換と同じだけど、通常のテキストと同じように選択やコピペも可能。Javascriptを切った環境では通常のテキストが表示され、HTML上のテキストを修正するだけで変更が反映されます。 ただし日本語では使えない。正確には、使えるけど重すぎて実用に耐
YUI Theater — Doug Geoffray: "From the Mouth of a Screenreader"
YUI Blog YUI Theater YUI Theater — Doug Geoffray: "From the Mouth of a Screenreader" YUI Theater — Doug Geoffray: "From the Mouth of a Screenreader" We held our annual internal frontend engineering conference at Yahoo! earlier this month, and one of our invited guests was Doug Geoffray of GW Micro. Doug came by to teach Yahoo! frontend engineers about the history and current state of screen-reader
[ThinkIT] オープンソースカンファレンス 2007 Tokyo/Spring、セミナー「オープンソースCMS、Ploneを用いたWebアクセシビリティの実現」
TOP＞ITニュース＞ オープンソースカンファレンス 2007 Tokyo/Spring、セミナー「オープンソースCMS、Ploneを用いたWebアクセシビリティの実現」 オープンソースカンファレンス 2007 Tokyo/Spring、セミナー「オープンソースCMS、Ploneを用いたWebアクセシビリティの実現」 WebアクセシビリティをPloneで実現 3月16日、17日の2日間にわたって、日本電子専門学校にて開催された「オープンソースカンファレンス 2007 Tokyo/Spring」の中から、セミナー「オープンソースCMS、Ploneを用いたWebアクセシビリティの実現」の模様をお伝えする。今回は、最近注目を集めているWebアクセシビリティについて、NTTデータの取り組みが紹介された。 車椅子生活を送るNTTデータ 山本 真也氏は、「ITの普及によって買い物など日常生活でできるこ
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
![アルファ画像を扱うalphafilter.jsライブラリ[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
新着情報CMS | Web Creative Park
JavaScriptやjQuery、jQuery Mobile、HTML、CSSなどのリファレンスを提供しています 新着情報を表示するセミカスタマイズCMSです。GPLライセンス(GNU General Public License)で公開しておりますので、ご自由にお使いください。 【注意】一部のサーバーではPHPの設定ファイルであるphp.ini で allow_url_fopen = On と記述しなくては利用できません。 設置方法 まずは、新着情報CMSをダウンロードします。 次にダウンロードしたzipファイルを解凍します。 解凍されたindex.phpをテキストエディタで開きます。 14行目の $password = "admin"; のadminの箇所を他のパスワードに変更してください。 17行目の $encode = "UTF-8"; のUTF-8の箇所を出力したい文字コードに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Where Do You Want To Spell Today? » UIE Brain Sparks
SEO×PHP×XHTMLに最適化されたCMS開発のコツ-CSS Nite in Osaka 2007 春の陣 前夜祭