これだけは講読したい！デザイナー向け海外ブログ厳選20本+α | 素材系・ノウハウ系 etc.
使える資金が少なく、宣伝広告にリソースを割けないスタートアップ。ユーザを増やし、サービスを使ってもらうための有力な施策の一つは、良いデザインを採用することです。 先日、日本発のOrigamiがスタートアップ界隈で有名になりましたが、優れたデザインが高く評価されたことは記憶に新しいでしょう（記事：出資元のKDDIがデザインセンスを高く評価、5億円を出資）。スタートアップといえども、デザインを軽視することはできないのです。 Webデザインだけでなく、最近ではアプリのUIなど、デザイナーの仕事は広がっていくばかり。忙しさを理由に、日々の情報収集を日本語のブログだけで済ませていませんか？ 良いデザインを誰よりもいち早くキャッチアップしサービスに活かすため、海外ブログの購読はもはや常識と言っても過言ではありません。 このエントリーで取り上げるブログのカテゴリは以下の通りです。 ● デザイン方法論系
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
IE9ヤバイ。IE9の文字間隔･互換モード･DOCTYPE宣言について
IE9文字間隔確認用サンプル 文字間隔や段落の間隔をチェックする為のサンプルです。とりあえずFirefox3.6とFirefox4でズレない事を確認。文字間隔のチェック用なので意味不明な文字が並んでいます。 ※追記･注意：下記ページはスタイルシートで少しだけ調整しています。 全くの未調整の場合、段落の高さが大きく異なったり、半角英数字のフォントが 文字コードで変わったり、かなり比較し難いものになったため。 後述しますが、英数字フォントにsans-serifを指定すると問題が発生するようです。 ※サーバー引っ越し後、以下リンクは文字化けするようになりました (修正予定なし) HTML 4.01 サンプル HTML 4.01+UTF8 HTML 4.01+EUC-JP HTML 4.01+SHIFT-JIS XHTML 1.0 サンプル XHTML 1.0+UTF8 XHTML 1.0+
WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～
第6回 岡山WEBクリエイターズのセッション1で発表したスライド内容を全文掲載。第6回 岡山WEBクリエイターズ セッション1『WEB標準デザイン、はじめの一歩 ～デザインからマークアップまで～』 岡山WEBクリエイターズ勉強会でお話した内容を、スライドとともに全文掲載しています。 テキストはあくまで原稿そのままですので、実際に喋った内容とは幾分異なる場合があります。 スライドのPDFをダウンロード 講師概要 SKPRODUCT代表。 デザイン、コーディング、PHPによるシステム構築、ActionScriptを使用したFlashなど、WEB制作全般を行うWEBアーキテクトです。 岡山の大手企業・学校などを中心にWEBサイトと独自に開発したCMSフレームワーク『SEED』の提供を行っています。 本日は、WEB標準デザインはじめの一歩です。 WEB標準というと、技術的なことを想像される方
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
SVGは普及する。WebデザイナーはCSSとともにSVGが必須科目に
Internet Explorer 9では、Webブラウザ上にベクター形式で画像を描画できるSVG（Scalable Vector Graphics）のサポートが表明されています。ITproの記事「IE9の登場で画像フォーマットの本命に浮上するSVG」では、IE9がSVGをサポートすることでSVGの普及が始まるのではないかと予想しています。同意します。 SVGはHTML、CSS、JavaScriptと並ぶWebの要素に SVGは2001年にバージョン1.0、2003年にバージョン1.1がW3Cの勧告として策定されました。しかしマイクロソフトはIE6、IE7、IE8とずっとSVGに対応せず、一方でSVG策定以前から同社などが推進していたVML（Vector Markup Language）と呼ばれるベクター形式の言語を実装してきました。 Webブラウザで最大シェアを持つIEで使えないSVGは
デザインや使いやすさよりも、はるかにSEOやSEMにお金が流れ易いジレンマ
実際に優れたレスポンスを持ったwebデザイナーがいたとしても、優れたSEO、SEM能力が高い人間に食われてしまうジレンマが、現在のweb業界なのかもしれない。 こんな事をいうwebデザイナーに会った。 大事なのはデザインではない。使いやすさもおまけだ。アクセス数の高いホームページで、リピーターを引き付けるサイト。そんなSEOやSEMを歌う連中にばっかりお金が流れていって、デザイナーはどんどん食われていくんだ。もうダメだ。webデザイナは。 つまり 露出回数を上げるスキルリピート力この二つがあれば、web制作費が多少高くても勝ち取れる、というのだ。 なかなか興味深い話だった。 webデザインとはなんなのか 制作を「依頼」する側にある欲求は実にシンプルだ。 「コストがかからず」「カッコ良く」「見やすく」「売り上げが上がり」「問い合わせがバンバンくる」 こんなサイトをご要望だろう。 制作に関して
安藤日記
Deborah Schultz | Web Directions East It's the People StupidView more presentations from deb schultz. Deborah Schultz Put People First『まずは人が重要！』 The Impact of the Social Web on Business http://www.deborahschultz.com ------------------------------------------------- これは HTML5,4,3,2,1 のことではないです。 デザイナー、デベロッパーとして企業のためにどう web サイトを用意するか？ 橋渡しをする役。 Web に情熱をかけています。 P&G での経験もあります（広告） 実世界で人々がどう行動するのか？ 旧来は物理的
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
SEOを意識したサイトデザイン | パシのSEOブログ
完成したサイトにSEO対策を施すよりも、始めからSEOを考えて制作を行った方が効率も良く、バランスの取れたサイトが出来上がります。 基本となるデザインレイアウト 上図はネットで配布されているテンプレートなどで良く見かけるデザインですが、SEOを意識した簡易的なレイアウトとなるとどうしてもこんな感じになってしまいます。あくまで基本となるレイアウトですので、作るサイトにあわせ位置の調整や、必要な項目の追加を行ってください。 ヘッダー ページの見出しとなるh1と、ページの概要を説明するためのテキストを配置します。h1とテキストは全ページ異なるユニークなものを記述します。 ヘッダーの左側にはロゴを配置し必ずリンクにします。ロゴは、ソースの上部に位置し、全ページ共通のトップページへのリンクとなる為、CSSの画像置換えを使用しアンカーテキストにはメインキーワードを含ませた方が良いでしょう。 イメージリ
HTML5サンプル集 - 株式会社あゆた
このページでは、HTML5のAPIを利用した簡単なサンプルを公開しています。 このサンプルの多くは、弊社技術顧問の白石氏がマイコミジャーナルに寄稿した記事で使用したプログラムを元に、多少の改変を加えたものです。 どれも非常にシンプルなものではありますが、HTML5の各機能を試すためのとっかかりとしてご利用頂けると思います。 白石氏が寄稿した記事はこちらになります。これらの記事と合わせてサンプルをご利用になって頂く事で、各機能の理解がより深まることでしょう。 詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 アプリケーションキャッシュのサンプル (ダウンロード) (Safari4、Google Chrome3で動作確認済み。Firefoxだと、アプリケーションキャッシュのイベントが正しく発生せず、動作しないと
【特集】詳解! HTML 5と関連APIの最新動向 - 新タグ&API編 (1) はじめに - 本特集の趣旨 | エンタープライズ | マイコミジャーナル
Google I/Oの基調講演で大きく取り上げられて以来、HTML 5に対する注目度は増すばかりだ。仕様に関する議論もWHATWGのメーリングリストで日々活発に行われ、ブラウザによる実装も着々と進んでいる。 本記事は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。HTML 5の仕様はまだまだ流動的であり、実装状況も刻一刻と変化しているが、HTML 5に対して強く興味を持っている方々に少しでも詳しい情報をお届けできれば幸いである。また、HTML 5で追加される各種の新機能について短時間で把握したい場合は、「5分で把握するHTML 5 - Google Developer Dayセッションリポート」という記事があるのでそちらもお薦めだ。 本特集は全2回から成り、前半となる今回では「HTML5 - HTMLとX
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
マークアップエンジニアじゃなくても覚えておきたいHTMLとCSSの話(〜HTML5・CSS3、IE8 それぞれの準備に向けて) - livedoor ディレクター Blog(ブログ)
こんにちは。 livedoor Blogを担当しています石野と申します。 前職はマークアップエンジニア(HTMLコーダー)をしていました。 今回はその経験を踏まえ、ディレクターとして把握しておいた方が良いHTML/CSS関連のお話をご紹介しようと思います。 昨年からHTML5、CSS3、そしてInternet Explorer(以下IE)8のベータ2版発表と、バージョンアップに関するニュースが相次ぎました。 その違いを認識する上でも、また制作サイドのディレクションに活かす上でも本エントリーを参考にしてください。 ▼ 構成 (1) HTML - 文書型について (2) HTML+CSS - クロスブラウザについて (1) 文書型について - ファイルの先頭に陣取っている「DOCTYPE」とは何か？ HTMLソースを開くと、こういった記述を目にしませんか？ !DOCTYPE html PUBL
Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ
HTML5では何ができるのか、各ブラウザの対応はどうなっているのか、が一目でわかる -What is HTML5?
【ネタ帳】HTML5に関するチュートリアルやTipsなどのまとめ + 25記事*二十歳街道まっしぐら（FC2ブログ時代）
Site Under Maintenance
