ホームページ制作のアレ

Website Design tips array.

スマホ対応してサイトリニューアル

2014/01/15
弊社ホームページを2014年版にリニューアルしました。 今回のポイントは ■スマホ最適化のためレスポンシブデザイン導入 ■もうIE8は切り捨てると決めて、CSS3を使用しはじめた あたりになります。 閲覧ユーザー中のスマホの比率は年々上がってきていますが、去年あたり特に大きなインパクトがあったらしく、もはや最適化なしではこの先不安、という状況になっておりましたので、レスポンシブデザインを採用してみました。 弊社のように更新するページが一部分に限られているサイトの場合、本来はモバイル向けに別ページを作るほうが向いていると思いますが、単純にレスポンシブデザインやってみたかったので、やっちゃいました。 今年の4月を持ってWindowsXPのサポートが全て終了=IE8終了となるわけですが、CSS3を使うにはまだIE9というもう1枚でかい壁が残っています。このあたりでどのような構築にするか悩んだ訳ですが、やはりレスポンシブデザイン優先…という事で、IE9以下のブラウザには、余分な読み込みになりますがcss3-mediaqueries.jsを使わせてもらう事にしました。 他に擬似要素やアニメーションなど、対応していなくてもレイアウトが崩れないような場所にはCSS3を使いまくっています。 あと1つのネックはHTML5対応なのですが…いい加減各陣営仲直りしてもらいたいものです。

Makeshopのデザイン的な問題点

2013/10/08
きつい見出しになりますが、久しぶりにMakeshopを覗いてみてびっくりしました。 未だにMakeshopではdoctypeが出力されません。 こう書いた時点で、コーディングに理解のある人なら、ああ…と思い当たるかと思いますが、 doctypeが無い(※html5の !DOCTYPE html が書いてある、という訳ではありません。doctypeそのものがないのです)という事は、IE8はおろか、IE9で見ても標準で互換モードになってしまうのです。 試しにサンプルショップをIEの開発者ツールを開いた状態でみていただければ、「ドキュメントモード:IE5Quirks」という寒気のする文字が見られると思います。(IE10だけは互換モードが進化しているので無事) しかも、カテゴリーリストや商品一覧の表示が、現在もう先進的なサイトでは完全にCSS3に移行している所も多くなっているこの時勢に、未だにガチガチのテーブルコーディング、しかもtableの多重入れ子になっています。 とにかくIE9でもしょぼい互換モードになってしまうので、それ相応の対応をしなければなりません。 IE=edgeいれときゃいいんじゃね?とお思いかもしれませんが、Makeshopは決められたMeta以外ヘッダをいじらせてもらえないのです… 即ち、互換モードが既定になってしまうのを防ぐ方法はないのです。 いつまでこんな時代遅れの設計にしておくのでしょうか。

めったにあるものじゃないし!?

2013/10/07
ニュース記事より 「XP期限切れ、自治体「攻撃めったにない」」 それを言ったら、地震などの災害だって滅多にないから対策が遅れても大丈夫、てことになるじゃないですか。 仮にも「IT推進課」でこういう事言っていられるのは、ある意味羨ましくあります。 致命的な状態を招いても自分の生活に影響しないからこそ、安穏としていられるのでしょうね。

Googleの新しいSEO対策対策

2013/10/04
先月末あたりから、ディレクトリ登録サービス宛てにgoogleからリンクにnofollowを付与するようにというメッセージが来た、という話をちらほらみかけるようになりました。 まだ提案段階でペナルティの実働はないようですが、弊社のSEO解説ページでも前々から書いております通り、googleの目的は一貫して 「自社のキーワード広告以外にお金をかけてgoogle検索上位表示させる仕組みを潰す」、即ち商売敵を潰すという事でしょう。 サービスを売る側の立場としては、うちのコンテンツで優位に立ちたかったらうちに金を払うのが当然、という姿勢は営利企業としてこれまた当然ですので、この点はどうこう言えません。 問題はこの先、いつになるかは不明瞭ですが確実にYahoo!ディレクトリ等のほかのディレクトリ登録サービスにも同様の影響が出てくるであろうという事、そして当然ながら、近いうちによくある「リンク○個保証」と謳っている被リンクサービスにもその影響は及んでくるでしょう。 (勿論、多数の自社運営サイトでそれぞれちゃんとオリジナルのコンテンツを運営しているような所なら話は別ですが) 上記の通り今はまだ影響は些少なようですが、なにせgoogleは全ての判断をオートマチックで行う、というのがポリシーの会社ですので、怪しいと思われる行為はしないにこした事はありません。 影響が些少な今のうちに有為なコンテンツを増やしたりする地道な施策を併せて行っておくのが正解かと思います。

IE8以上なのにレイアウトが崩れていると言われたら、互換機能を疑う。

2013/07/11
ブラウザーチェックをばっちりやって納入したのに、IE8やIE9でレイアウトが思い切り崩れていると言われる。 見せてもらうと、まるでIE6やIE7で表示したような崩れ方。 この症状の場合、ほぼ100%そのIEの「互換機能」がONになっているのが原因と思われます。 互換機能という名前からして「いいもの」と思われがちですが、実のところは「IE8以上でもまともに動かなくなるような旧い旧いシステム(…どんなものか想像もつきませんが)を搭載したWEBサイトでも、IE8以上で見られるようにする」という機能で、端的にいうと「解釈をIE7程度に戻す」という機能です。 いわば、「旧式ブラウザー表示機能」と言えます。 …しかし先にも書きました通り、マイクロソフト自体がIE6/IE7を撲滅しておきながらこの機能、一体なんなんだと言わざるを得ません。 この機能を制作側で回避するには2つ方法があり、 1、Doctypeをがっちり書いておく…HTML5のDOCTYPEにしておけばIE9/IE10では最初から標準モードになるはずですが、ASPの利用などでそうもいかない場合もあり、そもそもIE8がこぼれてしまいますので 2、METAタグを書く < meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> と書く事で、モードを強制的にそのIEの「最新Verでレンダリング」に固定でき、互換機能ボタンを消せます。 —————- 余談ですが、この機能、IE8や9ではあまり心配する必要がありませんでした。 ちゃんとボタンとして独立しているため、意図的に押さない限りまず発動しませんし、自分で押した結果レンダリングが変わったというのが分かるので、もう一回押せば元に戻る、というのもすぐ分かるためです。 ところがIE10になって、ボタンのデザインが… gokan こんなですよ。(※紙が破れたようなマークが互換ボタン) どう考えても「再読み込み」と間違えておします。 このレイアウト考えたデザイナー、なに考えてるんでしょう。 普通こんなん上げてきたらグーで殴られてもおかしくない酷さだと思います。 —————- IE10へのバージョンアップがはじまった今、今後はもう上記のをデフォで書いておく必要があると思いますが、問題は… このタグ、ヘッダのかなり上、おそらくはエンコードのすぐ下くらいの順位で書かないと場合によっては動作しない事があります。なので弊社が得意とするカラーミーSHOP-PROなんかでは使えない方法なんですよね。 ※カラーミーSHOP-PROのMETA追加はヘッダ内の「一番下」に追加される 実際やってみましたが、IE8/9では対処できたものの、IE10では互換ボタンがでたままという… 肝心なIE10が対処できないという結果でした。

WordPressとMovabletype、どちらが良いか。

2013/07/03
WordpressとMovabletype、どちらが良いか。 WEB制作系のブログを書く人なら、一度は必ずネタにする話ですね。 勿論、うちはDrupal!Joomla!や、カスタマイズされた有料CMSパッケージサービス!という方も沢山いるとは思いますが、やはり日本でCMSのビッグタイトルといえばWPとMTというのは確実なところかと思います。(※海外ではWPが圧倒的です) 日本でもいうまでもなく今はwordpressのほうが優勢ですが、弊社はMovabletypeをお奨めするケースがあります。 —– CMSを導入するお客様にとって、大きな「障壁」が3つあります。 (1)ひとつは(CMSに限りませんが)プレーンなWEBに何かシステムを追加する事による「セキュリティの問題」 (2)もうひとつは万一のデータベース破損による「バックアップの問題」 (3)そして最後が「直感的な管理画面の問題」です。 上記のうち(1)はwordpressが圧倒的に優れていますね。今まで見てきたCMSの中でも、WPのアップデートのしやすさは秀逸です。管理画面に「アップデートのお知らせ」がでたら「このボタンを押せばOK」と嫌でも分かるこのインターフェイスは実に素晴らしいです。OPENPNEあたりはこの簡単さを是非見習ってほしいものです。UIというのは「分かる人だけ分かればいい」というものでは絶対にありません。 (2)はwordpressにも優れたバックアップツールがいくつもあり、自動的かつ定期的にバックアップを取ってくれます。一方Movabletypeは基本のバックアップ機能はいちいち手動操作ですが、そもそも静的HTMLを吐き出すシステムなので万一のDBクラッシュが起きてもとりあえづホームページが見られない状態にならない、というのは非常に大きなアドバンテージです。 ※Wordpressにも静的化プラグインはありますが、どうも動作関連や他プラグインとの相性で問題があります。 ※wordpressはクラッシュが起きたら修復するまではWEBサイトは壊れたままです。 まぁ今時のレンタルサーバは大抵データベースのミラー化を採用してますのでこのような事態はまずありませんが、ごく稀にRAIDを採用していないレンタルサーバもあります。某大手とか… で、弊社がMovabletypeをお奨めする大きな要因になるのが、以外にも(3)です。 Wordpressもカスタム投稿タイプの導入により、コーナーの分類はMovabletypeと互角の仕様になったと言えますが、管理画面がどうしても、それぞれのコーナーへの入り口が縦一直線に並んでしまいます。これが弊社としては、わかりづらいと感じています。 (勿論管理画面自体を改造すれば解消できますが、そこまでの予算をかけられない場合が多数ですので…) MovabletypeはWEBサイト→それぞれのコーナー→それぞれのカテゴリとツリー式になっているため、WEBに不慣れなお客様でも分かりやすい管理画面構造をしているのがポイントなのですね。 —– ですので弊社としては、 頻繁に更新するページが一箇所のみ、もしくは少ない→Wordpress 全てのページをある程度更新する可能性がある→Movabletype という風に提案を分けております。 あ、あとあれですね、どうしても特定のメールフォームを使いたいというかcontactform7以外を使いたい時。 あとハウジングの同居数が多そうなサーバだと、静的HTMLを出してくれるMTのほうを使いたいです。 投稿時は圧倒的にWPのほうが速いのですが、それは投稿する側の快適性の問題であって、閲覧する側はプレーンなHTMLで見られるのがより良いのではないかと思っています。 …勿論、プラグインの関係で、どうしてもWordpressでないといけないというケースもあります。 今は大抵の要件はjqueryのプラグイン導入でどうにかなりますが、そうもいかないケースもやはりありますからね。

ブログデザインちょっと変更しました

2013/06/19
弊社のようなお客様から受注して作業するタイプの業種の場合、どうしても、「案件を抱えている最中なのに、ヒマ」という状況がたまに発生します。 お客様からの返信待ち、素材提供待ちの時間がそれにあたります。 で、2時間ほど空いたので、突貫でブログデザインを作ってみました。 以前レスポンシブデザインの基本的な勉強用に作りかけていたフレームを流用したもので、 幅はまだ可変になってませんが、段階的な寸法(スマホサイズ/7インチタブレットサイズ/それ以上)でレイアウトが可変するようにしました。 無段階可変でなければ、まだまだ計算が楽なうちですね…。 見返してみたらpreタグのとこが突き抜けちゃってかっこわるいですね。なんとかせねば。 構造は、Wordpressテンプレートの本当に基礎の基礎、絶対ないと困る header/sidebar/footer/function/index/css の6ファイルだけでできています。 functionの機能もadminバーを消す wordpressのバージョンを消す サイドバーのウィジェット化、の3点だけです。 まさに余計なモノが一切無い状態。3Dモデルでいうとボーンだけの状態です。 Wordpressのデフォルトのテーマはとかく構造が複雑なので…おそらく全ての機能を動かす必要がある以上、そうなっているのだと思いますが、こういったシンプルな基本機能のみのテーマが一個あってもいいかと思っています。 必要に応じて後から肉付けしていけるタイプ、みたいな。 ちなみにテーマのソースコード全部足しても500行ないです。短!

サイトをリニューアルしました

2013/06/16
実に4年以上ぶりに、弊社サイトをリニューアルしました。 ただこのデザイン、2年前に作成しかけで、業務に手一杯になり放置されていたものを完成させたもので、 現時点で作りたかったものではありません。 ※コンテンツ文章の見直しなども全然できていませんし いつまでもTOPにFlashを置いている事態だけはなんとしても一刻も早く改善したかったので、このような 2段階のリニューアルに踏み切った次第です。 あくまで「つなぎ」の状態ですが、今後とも宜しくお願い致します。 このブログのテンプレートまで手が廻らない状態ですので、しばらく既存のテンプレートを使用しておきます。

下請けの問題

2013/06/04
弊社は高度なプログラムの制作は許可を頂いた上で下請けに出しているのですが、今回その下請関連でかなりひどい目にあってます。 窓口の人には何の罪もないんだけど、連絡を取れるのがその人なのでどうしてもきつめの対応になってしまう。 申し訳ない限りです。 自社製作なら遅れる事はありえないし、自分の努力次第でどうにもなるんですが、こういったケースではとにかくあの手この手で 連絡をつけるしかない。非常にもどかしいです。 しかしなんなんですか本当に。きちんとセーフティネットができていない会社とか信じられない。

ブラウザーの統計

2013/06/03
最新の統計では、IE勢で約50%、残りがモダンブラウザ、という風になっているようです。 http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0 TOPがIE8というのがWEB屋にとってはまだまだ頭が痛いところです。 CSS3PIEを使うにしても、完全に同じ挙動が使えないため、表現法の幅が狭くなったり、ソースコードが重くなったりといい事はありません。早いとこ最低レベルをIE9にしてほしいものですが… ただcss3はcss3で、いつまで内輪もめしているんだという感はぬぐえません。 いちいちwebkit系用、Mozzila用…と3つも記述しなければいけないのは冗長の一言につきますので、 はやいとこ正式勧告としてほしいものです。 しかしIE6ユーザーがまだいるのが恐ろしいですね… 強制的にWindowsupdateを切っていればIE6は保持できると思いますが、ブラウザシェア調査にひっかかっているということは、その状態でネットを閲覧しているって事ですよね。恐ろしい。
< 前のページへ
次のページへ >