デザインについて
投稿日：
ホームページ制作にはデザインも大切な要素です。
ホームページのデザインは視覚的なデザイン要素を多く含みますが、一方的な情報発信にとどまらない要素を持つインターネットの性格上、目に見えるデザイン以外にも人の動きに関わるデザイン（情報デザインあるいは工業デザイン）の要素も求められます。
また、心理的な要素もあり、有名なのはネットでスクロールなしに記事を読むときは、目線はＦもしくはＺの形に動いているということです。
それと共に重要なのがどのような訪問者でも同じ情報が取得できることです。これをアクセシビリティといいます。ホームページは訪問者のブラウザ（インターネットを見るソフトウェア）によっても表示結果が異なる可能性があります。
ホームページを作成するのは簡単です。
専門的な知識がなくても作成でき、また構成に細かなミスがあっても大抵のブラウザは正しく理解し表示することができます。
しかし、訪問者がどのような環境でも同様に表示できるアクセシビリティにも考慮したデザインができてこそ、ホームページの原点である情報発信ができるではないでしょうか。
ホームページのデザインは見た目ばかりだけでなく、構造や機能性も含めて考えましょう。
Posted by T.fujii
HTML5時代のhoverの使い方
投稿日：
HTML5の盛り上がりよりも、WPの方が盛り上がる社内ですが個人的に最近ちょっと気になる事がありました。
ソース元は、「Web Design Trends in 2011」です。
2011年のWEBデザインのトレンド！というタイトルの今年の初めに書かれた記事です。
その中の5番目「5. Designing for Touch Screens, Not Mice」です。
hoverを使いメニューがちょっとした挙動を起こしすのをCSSで組んだりしていますが、ここで指摘がある通り
However, there’s no hovering in touchscreen.
タッチスクリーンには、hoverの概念が無いんです。
要するにiphoneの様なやつですよね。
わたし自身、スマートフォンは「電話ではない！あれは小型のPCに電話機能がついたものだ！」と日々言っているほどCPUなどに関しては日々進化し続けている。
もちろん、通信会社にとってはキラーコンテンツになるのですが今後私たちの様な制作会社は、IEやらchromeやらのブラウザチェックの他にスマートフォンも必ず視野に入れなければならないと思っております。
で、hoverにもどりますが、これって今後は力を入れていく所ではない。むしろ、クリック出来るならクリック出来るぞ！と分かりやすいデザイニングをしなければならないという事です。
photoshop パスで切り抜き
投稿日：
丸い画像などをキレイに切り抜くには、パスツールを利用して画像を切り抜くのがおすすめ。
ペンツールで、切り抜きたい画像を囲み、選択範囲として読み込みます。
境界線を調整で、出来るだけ自然に切り抜ける様に調整します。
僕の場合は、ぼかしを1.0pxに設定した状態から徐々に微調整しています。
最終的には、選択範囲をカットしたレイヤーを作り完成です。
favicon
投稿日：
Favicon（ファビコン）とは、ウェブサイトやウェブページに関連付けられたアイコン。Favorite icon（フェイバリット・アイコン）を縮約したものです。
ブラウザのブックマーク(お気に入り)リストやアドレス表示欄、タブブラウザではタブに表示されたページタイトルの左側に読み込まれたアイコンを表示します。
Faviconの設置方法は、簡単です。Faviconを作成して、
タグの中に下記を記述します。それから、Faviconをアップロードします。
ストーンペーパー 名刺デザイン
投稿日：
当社の名刺です。
裏は、5枚あわせて一枚の絵になります。
一応意味があります。
6枚目でまたつながるので地球をイメージしています。
また、全然違う人たちがつながっていたり、誰かが間にいてもどこかでつながってるスモールワールドを名刺で表現しました。
どんな人にも、表面で名刺交換が出来るように表面に日本語と英語表記を入れてます。
そのため、基本的には裏面に英語表記をいれたりするのはなんとなく躊躇してしまいます。
縦使いは、横よりも僕のセンス的にスマートに見えるから。
と、名刺にもストーリーがあったりします。
もちろん、どこの会社にもストーリーはあると思いますので印刷屋さんのテンプレートとかもよいのですが、名刺というのはブランディングの基本だと思いますので当社が名刺のデザインをする際は結構時間がかかったりします。
ちなみに紙は、ストーンペーパーと呼ばれる環境に優しい素材のもの、もしくは、障害者さんが中心に働いている印刷屋さんにお願いしましいます。
（この施設は、なんと助成金など援助なしで会社として運営しているんですよ！）
IEtester と browserlab の表示が違う件
投稿日：
コーダーは、当然IEを意識してコーディングしていると思うのですがここに来てIE9が出てきました。
現在の課題は、結局IE6をどうすべきか？
一年ほど前に既にIE6は、納品時のブラウザチェックから外したのですがやはり無視は出来ない為、IE6に悩まされている。
下記のサイトでは、世界のIE6のシェアが見れ、確実に減って来ているとはいえこのサイトの訪問者の7.2％がIE6での閲覧です。
http://www.theie6countdown.com/default.aspx
ブラウザチェックで有名なのは、マイクロソフトから出しているIEtester と アドビから出しているbrowserlabです。
が、なんとIE9での表示が違う。
どっちを信じればよいのか、またはどちらもクリアしなければならないのか悩みどころ。
社内のパソコンに片っ端から、OS違い、ブラウザ違いでチェックするのが一番確実ですが現実的でない。
（仮想で組むとう手もありますが。）
この件についてブログなどでの記事がなく、「もしかして、うちだけ？」なんてちょっと不安な気持ちになります。
余談ですが、browserlabの紹介をしているブログ結構多いですが内容が薄いブログが多くていったい何の目的でブログを書いているのか怒りも感じました。
サイトオープンの準備ができたら
投稿日：
通常は、サイトオープンとほぼ同時期に下記の有名なサイトに登録をします。
するとクローラーがやってくる訳なんですが、毎日やっている訳でもないのでいつも記憶をたよりに思い出しながら登録しています。
備忘録も兼ねて記述します。
1 Google に URL を追加
http://www.google.com/addurl/?continue=/addurl
2 XML サイトマップを送信
http://wordpress.org/extend/plugins/google-sitemap-generator/
上記のプラグインを利用します。
Ask.com、 Google、 YAHOO、MSN Searchのロボットに対応したXMLサイトマップを生成してくれます。
http://www.google.com/webmasters/tools/?hl=ja
上記にアクセスしてサイトマップ（sitemap.xml）を送信します。
1 Yahooサイトエクスプローラーの設定
https://siteexplorer.search.yahoo.co.jp/
2 管理サイト認証
1 bingウェブマスターツールの設定
http://www.bing.com/webmaster
2 metaタグをヘッダーに追加