1. [その他]->[動作環境]->[上級者向け設定]をONに。
2. [その他]->[動作環境]->[編集]->[IME]->[入力モード]のトゥルーインライン入力を選択。

パソコン壊れた！ので買った。

去年（2010年）に作業マシンが不調で1920×1080モニタ、Windows7を購入しネット閲覧環境も変化し、サイト閲覧時に色々なものが古いと感じるようになりました。現在の環境に適応した新しいサイトを制作できないか？と思い立ったのが今回のサイトリニューアルのきっかけです。

FlashではないフルFlashのようなトップページ

まず最初に考えたのが「フルFlashみたいなフルスクリーンのトップページを作りたい！」でした。ただし、自サイトをフルFlashにしても実際の業務内容と乖離してコンバージョンが下がるだけなので、フルFlashのサイトではなく、検索エンジンにも登録されやすいようなプレーンなHTMLサイトを作るつもりでした。

広い画面で見た場合のみグリッドを2列にできないか？

実は以前から「できないかな～」と考えていたのですが、これも今回下層ページでやってしまおうということになったのです。まとめると、サイトデザインのポイントは以下です。

• 広い画面を生かしトップページを横幅いっぱいに使う。
• 横幅1920ピクセルと1024ピクセルの両方に最適化する。
• Flashは使わない。使ったとしてもトップページの一部のみにとどめる。
• ClearTypeフォント・メイリオを生かした大きなテキスト。
• 更新がイヤにならないようにWordPressで作る。

以下は機能的な必須条件。

• ポップアップ画面は単独で開いても問題なく表示させる。
• JavaScriptを切っていても情報を入手できる。

ビジュアル面に関しては以下。

• 制作実績を際立って見せるためにサイトのカラーはほぼ単色で統一する。
• ターゲットを考慮しCOOLになり過ぎないようにする。

また、補助的に以下のようなものも追加しています。

• Windows XPなど特定の環境に対し文字サイズを調整する。
• Operaなど挙動が特殊なブラウザでは一部の機能をオフ（情報を取得できるよう）にする。

あとになって色々追加していったのですが何を追加したか忘れてしまいました…。あとで追加したものの中には、当初のコンセプトとずれているものもあります。でもコンバージョンのためには仕方がないのです。

スクリーンショット

実際にできた画面がこちらです。まだトップの壁紙やメニューのアイコンはダミーですが…。他には無い、なかなか面白いサイトになったと思います！

横幅1920ピクセルの画面で見た場合

マウスを下に持っていくと…スライドが開きます。

トップページの離脱率が激しかったので、これは分かりにくいのかも知れない…と、現在はセッションの最初のアクセスのみスライドが自動的に開くようにしてあります。

横幅1280ピクセルの画面で見た場合

ロゴのした部分が伸びて、スライド内のグリッドがこんな感じに2段になります。jQueryを利用してスクリプトを書きました。

横幅1024ピクセルの画面で見た場合

トップページはちょっと狭いか…。最初は画面を狭くするとスライド内のグリッドが3段になるまで可変でしたが、見にくかったのでやめました。画面内をスライドが覆いつくすくらいに画面を狭くすると、スライドで情報が得られなくならないように、スライドの最下端固定がオフになります。

制作実績のポップアップ

これは以前のバージョンのホームページから引き継ぎました。画面内のスクリーンショットはドラッグするとスクロールします！ビジュアルは今回のリニューアルに合わせて修正。

横幅1280ピクセルの画面で見た場合（ヒットポイントについて）

狭い画面だとこんな感じですが…。

横幅1920ピクセルの画面で見た場合（ヒットポイントについて）

広い画面では2列になります！これがやりたかったんです。

巷でみかける「可変グリッドレイアウト」は格好良いし面白いとは思うけれど、正直見にくいと思っていました。見やすく、しかも可変！ということで思いついたアイデアです。目的は特定の画面環境で表示を最適化したいということなので、アニメーションしたりなんていう特殊なギミックなどは入れていません。ただ普通の回り込みをしているだけです。制作実績のサムネイルのグリッドも、1920と1024どちらにもそこそこ見やすい幅にしてあります。

あとがき

実際は1920ピクセル以上の画面幅のユーザーはまだ多くはないようで…多くのユーザーに対してサイトの良さを十分に引き出せていません。少しでも多くのユーザーに2列画面を体験してもらいたいので、横幅がそれなりに広ければ自動リサイズして1920ピクセルの見た目に近づけるように改変しました。

とりあえずは満足です。機能もビジュアルもそれなりに気に入っています。WordPressが重いかな…Smarty型テンプレートを組み込んでキャッシュが使えないような作りにしてしまった。まだまだやりたいことはありますが、「時間」＝「お金」が無いので今はできません。2560ピクセルで見たらどうなるんだ!? 分かっている問題点も直さなければ！がんばります。

ブックマークレット

javascript:( function() {
	var strUrl = "";

	if (strUrl == "") {
	objTag = document.getElementsByTagName('link');
	for (var i = 0;i < objTag.length;i++){
		if (objTag[i].rel == "next") {
			strUrl = objTag[i].href;
		}
	}
	}

	if (strUrl == "") {
	objTag = document.getElementsByTagName('a');
	for (var i = 0;i < objTag.length;i++){
		if (objTag[i].innerHTML.match(/次へ|次の記事へ|次の\d+/i)){
			strUrl = objTag[i].href;
			objTag[i].focus();
		}
	}
	}

	if (strUrl == "") {
	objTag = document.getElementsByTagName('a');
	for (var i = 0;i < objTag.length;i++){
		if (objTag[i].innerHTML.match(/next/i)){
			strUrl = objTag[i].href;
			objTag[i].focus();
		}
	}
	}

	if (strUrl == "") {
	objTag = document.getElementsByTagName('a');
	for (var i = 0;i < objTag.length;i++){
		if (objTag[i].innerHTML.match(/»|&#187/i)){
			strUrl = objTag[i].href;
			objTag[i].focus();
		}
	}
	}

	if (strUrl != "") {
		document.location.href = strUrl;
	}
})();

概要

1. ページに次のページ（LINKタグのNEXT）が明示されていればジャンプ。無ければ以下へ。
2. 「次へ」OR「次の記事へ」OR「次の○」を含むリンクを探してジャンプ。無ければ以下へ。
3. 「NEXT」を含むリンクを探してジャンプ。無ければ以下へ。
4. 「»」を含むリンクを探してジャンプ。

ブックマークレットの使い方

http://help.yahoo.co.jp/help/jp/bookmarks/bookmarks-07.html