ホームページ制作まん: 2009年9月アーカイブ

以前同じようなサービスをご紹介いたしましたが、
マルチバイト文字で一文字でURLを表示させてしまうというサービスを見つけたのでご紹介。

「 http://縮.jp/ 」




実用性はさておきURLに漢字が含まれている違和感が面白い。

ホームページ制作まんはこうなります↓

「 http://縮.jp/示 」

Illustratorでオブジェクトに簡単に陰影をつける方法をご紹介したいと思います。






まずは適当にオブジェクトを書きます。

このときクローズパスで書くと後が楽です。
どうしてもオープンでなくてはかけなくても後でむりやり修正すればいいだけの話ですが。


その後に、陰影をつけたいレイヤーの直ぐ上に影になる部分のオブジェクトを描きます。
輪郭からはみ出る部分は適当で問題ないです。




輪郭になるレイヤーをコピー→前面へペースト。
影になるレイヤーを挟むように輪郭のレーヤーを移動します。


最前面に来ている輪郭のレイヤーと影のレイヤーを同時に選択し
「オブジェクト」→「クリッピングマスク」→「作成」で
二つのレイヤーをクリッピングします。




それだけでは輪郭の線が重なったままになってしまうので
クリッピングしたグループのクリッピングパスを選択し、輪郭と同じ線を設定してあげればできあがりです。


私自身が考えてやってしまっているのでもっと効果的で効率がいいやり方があるかもしれませんが
ほとんど癖で操作してしまっています。
出来ることが多い分、効率的に使うのは勉強が必要ですね。

ＷＥＢ制作の場面で、よくコードの確認を複数人で行うことはよくあると思います。

増してや、ＳＥＯなどが絡んでくると尚更だと思います。

そんなときはこちら


「 http://www.textsnip.com/ 」

定期的にお届けしています、便利ブックマークレットのご紹介です。

以前、W3CによるHTMLのバリデートをご紹介しましたが、今回はCSSです。

「W3C CSS Validator」←このリンクをブックマーク。



こちらもSEOなどが絡む制作の際はわりと必須なチェックですね。

ブックマークレットを使えば、コピー＆ペーストなどの煩わしい操作もなく、チェックしたいサイトを表示してボタン1発でチェック完了です。

気になる方はぜひ使ってみてください。

「 http://www.psychicwhois.com/ 」




Ｐｓｙｃｈｉｃ　Ｗｈｏｉｓはあいているドメインを即座に検索してくれるサイト。

ＷＥＢサービスを始めるのに、窓口になるドメインはとても重要です。
使いたい文字を入れると、あいているドメインをすぐに表示してくれます。

また、それに近いドメインなども紹介してくれるので
狙ったものがあいていなかったとしても、かなり近いものが見つけられます。


同じようなサービスは沢山ありますが、レスポンスがよく使い勝手がよかったのでご紹介。

サイト制作した際は作っておきたいfavicon。

今回、使いやすいジェネレータを発見したのでご紹介します。

「256pixels」



画像をアップロードした後、適用したい画像範囲を選択して簡単に作成できます。

さらにピクセルごとの編集までできてしまういます。

使いやすくかなり高品質なジェネレータだと思います。

EC-CUBEでブロックの編集を行ったあと、特に何も問題がなかったにもかかわらず、変更内容が反映されないことがあります。

これは主にPHPのセーフモードが原因で起こることが多いようです。

その場合の対処法としては、サーバーにログインしてphp.iniの設定でsafe_modeをoffにします。



safe_modeがonの場合、PHPの制限を受ける場合があるのでこの現象が起きると思われます。

EC-CUBEではsafe_modeはoffが推奨のようです。

ＷＥＢ制作をする上で切手も切り離せないユーザビリティ。
このサイトでも何度もご紹介していることです。

少し古い記事ですがＷＥＢページを見る人の目の動きを検証した記事を見つけたので
ご紹介します。

「 http://www.useit.com/alertbox/reading_pattern.html 」

人の目は「Ｆ」の字を書きながらページを見ていきます。


これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうです。


その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描いていく。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。


第1段階：
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階：
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階：
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。

結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。


パターン1：記事



企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。

パターン2：製品ページ


これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。

パターン3：検索結果


各検索結果のタイトルを見ていくわけですが、トップページの上位しか見ていないことがわかります。


ＷＥＢで調べ物をするときなどは自分がほしい情報を見つける為にかなりのページを見ると思います。
そのなかで自分にマッチングしたものしか集中的に見ないと思います。

ページ構成を考える際、見せたいものを効果的に配置すること、重要です。

普段皆さん利用しているであろうＧｏｏｇｌｅの検索ページ。


こちらの検索結果の背景を皆でデザインして共有しちゃおう！という
面白そうなページを見つけました。

「 http://redesigngoogle.com/ 」



オンライン上のＣＳＳエディタをしようして、フォントを変えたり背景を変えたりできます。


たまに気分転換に見た目を変えてみるのも面白いと思います。

自分で気に入った画像など、背景にして使えるので新鮮です。

先日は補色についてお話しましたが、今日は「近似色」について。

補色は色相環の反対側の色でしたが、「近似色」はその名の通り、基本的に色相環で近い色となります。



近似色を使うメリットとしては、「色調が整う」「見た目の統一感が出る」などですが、「目立たなくなる」というデメリットもあります。

なので、近似色で構成するとき、たいていの場合は補色やそれに近い色などを織り交ぜてアクセントをつけるのが基本的です。


近似色の例


補色（の近似色）例


もちろん補色にこだわる必要はなく、違和感のない色であれば織り交ぜていくが良いでしょう。

ただしその場合も色の使い過ぎには注意です。

色を使いすぎると、キーカラーが何なのか分かりずらくなり、バランスも崩れてしまいます。

トータルバランスを見て、色を使うようにしましょう。

壁の落書きなどで見かけるＰＯＰな感じのロゴを作れるジェネレーターのご紹介。


「　http://www.graffiticreator.net/ 」

また色関係のお話です。

webデザインに関わる方々の間では、「補色」というのをご存じの皆さんも多いかと思います。

この「補色」というもの、これは何かと言いますと、

「色相環で反対側に位置する色」です。

ちなみに「色相環」はこちら。



RGBでは、混ぜると白になる色ということらしいです。

サンプルはこちらです。



見てわかるとおりですが、コントラストの対比がハッキリしていて、まさに「反対側の色」ですね。

この補色には、互いを強調しあう効果があるそうです。

外でよく見かける看板などにも使用されていることは多いです。

web上では片方の明度などを調整して、より見やすく（目に痛くない程度）で配色されているのをよく見かけます。

ただし見やすい配色ではありますが、無計算な多用は危険のようで。

いつでもそうですが、ベストなタイミングと場所で使っていただけると効果大だと思います。

「　http://www.3dfilter.com/　」




こちらのサイトは３Ｄテクスチャや画像を検索する専門のサイト。

実際につくるとなったら相当時間もかかるだろうし
ほしいと思ったものを検索して探すことができるので割と便利かも。

３Ｄイメージを制作で使用する場面自体少ないですが・・・

覚えておいて損は無いと思います。

web制作とは切っても切り離せない「色」との付き合い。

企業やロゴのイメージカラー、装飾用のカラー、注目度を与えるワンポイントカラー...などなど。

様々な状況・どう見せるか？など、色の使い方は千差万別です。

方程式のように明確な答えがあるものでもないので、使い方をマスターするのは大変難しいですね。

最近制作上で色を改めて考える必要があったので、初心に帰り基本色の人に与える印象を調べ直してみました。



赤　...　情熱、興奮、怒り、危険、激しい、愛情、熱い、炎、派手さ、力強さ、など

橙　...　新鮮、明るい、活発、元気、親近感、元気、明朗、開放的、新鮮、話し上手、など

黄　...　快活、幸福、光明、歓喜、希望、愉快、注意、緊張、軽率、友達、など

緑　...　平和、安全、永久、自然、若さ、爽やか、健康、癒し、安息、安定、思慮深さ、など

青　...　冷静、知性、忠実、誠実、冷たい、清潔、涼しい、憂鬱、静寂、インテリジェンス、など

紫　...　高級、神聖、神秘、高貴、豪華、崇高、優雅、精神世界、エキゾチック、など

白　...　清潔、明るい、純粋、素直、真実、真理、正しさ、涼しさ、など

黒　...　豪華、厳粛、重厚、高級、深い、男性的、悪、恐怖、不安、など



基本的な色だけでも与える印象は様々です。

色に迷ったとき、基本的な意味や目的を改めて考え直してみることで、ベストな色にたどりつけるかも知れませんね。

EC-CUBEを使っていると、割と頻出する問題かと思いますが、

EC-CUBEでブロックやシステム変更を行い「保存」を行うと、"（ダブルクォーテーション）などの前に¥マーク（バックスラッシュ）がすべて付いてしまい、ページやブロックが真白になったり正しく表示できなくなることがあります。



これはPHPのmagic_quotes_gpcの設定が有効になっている場合に起こるとのこと。

当方で調べた解決法としては、この設定をOffにすることで対処します。

php.iniファイルにおいて以下のように設定します。

magic_quotes_gpc = off


サーバーでphp.iniを使用できない場合は、.htaccessファイルを編集する方法も。

php_flag magic_quotes_gpc off


もちろんEC-CUBEインストール時の不具合や、その他不具合においても出る可能性は一応ありますのでご注意ください。

最近制作中にチェック柄が欲しくなり、いろいろ使えるものがないか調べていたところ、ありました。

「Tartan Designer」

その名のとおりタータンチェックを生成できるジェネレーターです。



色や幅を選択するだけで簡単にタータンチェック柄が作れます。

【＋ボタン】でストライプの本数

【スライダ】で線の太さ

【カラーピッカー】で線の色

また、下のアイコんでチェックの向きを変えられます。

【make it!】を押すと変更が反映され、【Download】で画像をダウンロードできるようになっています。

シンプル操作ながら結構いろいろ作れますので、気になる方はお試しください。

Googleの検索トップページがリニューアルしていました。


気づいた方いるのかな・・・・


検索の文字が大きくなりました。

微妙なリニューアルですが・・・
一部のユーザーからの意見だそうです。

確かにＷＥＢページにとってユーザビリティはとても大切です。
ちょっと考えさせられるリニューアルでした。

不定期にお届けしている、おすすめブックマークレットのご紹介です。

今日はW3CのMarkup Validation Serviceでバリデートできるブックマークレットです。

W3C Markup Validation　←ここをブックマーク。




web制作サイドとしては、やっぱりソースコードは美しく仕上げたいもの。

特にSEOを施工する際にも、文法上のミスをなくすためにValidation Serviceを使用することは多いかと思います。

そんなときはチェックしたいページを表示させてこのブックマークレットを使用すると、ボタン一発でチェックができます。

URLをコピーして...といった煩わしさから解放されますので、気になる方は使ってみてはいかがでしょうか。

最近リリースされたCMSの中で特に印象的だったのが、デザイナーでも使いこなせるという「bingo!CMS」。

従来のデザイナー向けCMS は、「テンプレートはHTMLにコメントタグを入れるだけなのでDreamweaverでも編集できる」というものが多かったけど、bingo!CMSの場合はCMSのUIを進化させて、Web上の直感的な操作でページの編集が行えるようにした点がユニーク。

お約束どおりPHPとMySQLで動く感じ。

bingo!CMSは基本的には商用なんですが、ユニット数が少ない無償のオープンソース版も配布されているので、サポートは不要、自力で何とか派にはそちらでも。

見た感じ、他のCMSよりも直観的な操作っぽい。

なおかつ、ファイル・ディレクトリ構成がシンプルで丁寧な感じです。

GoogleはChromeにブックマークや履歴データ、設定、タブの情報などをほかのChromeと同期するためのサービスの提供を検討しているらしい。


Chromユーザーとして私としてはうれしいです。FirefoxでいえばＷｅａｖｅ0.5に該当するサービス。開発はChromiumをベースにOSSとして取り組まれるという。

報告されている内容によれば、これらデータはGoogleアカウントに関連付けて保持できるようにされるという。当初はブックマークデータを対象とし、順次設定や履歴データ、タブデータも対象にするとみられる。同期するデータフォーマットにはコンパクトで高速処理が可能なProtocol Buffeが使われ、データの同期にはGoogle Talkと同じ枠組みを採用するようだ。


ほかの類似サービスと異なり、すでに多くのユーザがGoogleアカウントを取得している点が注目される。Google Docsのような形で、オンラインで共有しているデータを閲覧できるようにGoogleサービスとの連系も計画されているようだ。現時点でたしかなことは わからないが、開発自体はChromiumをベースにOSSで取り組まれることから、この同期サービスはChromeのみならずFirefoxなどほかの ブラウザからも活用できる可能性がある。


仕事柄いろいろなパソコンで調べ物などしなければならなかったりするので
同じ環境を再現できるのはうれしい。
ただ早いのはいいけれどChromeはもうちょっとＰＨＰとかＦｌａｓｈとか利口になってほしい・・・

結構ありそうで、なかなか見つからないのが和風デザインに拘ったサイト。

もともとアナログの要素が強い和風デザインなだけに、デジタルでの表現にはかなりの手間と労力がかかるせいもあると思います。

でも、やっているところは気合いを入れてやっていらっしゃるみたいで。

今回見つけたものを少しご紹介します。



・「Jonathan Yuen(2006)」

水墨画風のデザイン。マウスポインタも水墨画風に変わります。
画面遷移も素敵ですが、流れてくるサウンドも絶妙にマッチしています。




・「多田屋」

和風デザインでは結構有名らいいのですが、各ボタンを押したときの画面遷移にやられます。




・「日本の暮らし二十四節気めぐり 言の葉草 | 伊勢志摩の旅 よいとこせ」

「言の葉」と同時に奇麗な写真を楽しめるサイト。エフェクトもかなりかっこ良く大人なサイトです。


ゆっくりと眺めていたいような、どれもFlashならではのサイトですが、焦る気持ちを抑えてこういったサイトを周遊してみるのもたまにはいいかも知れません。

息抜きに、デザインの参考に...してみてはいかがでしょうか。

「　seadragon　」

最近、手書き風のデザインを求めているせいか、またまたアイコンセットを発見しました。

鉛筆で描いたようなラフスケッチのようなデザインで、意外と味わい深いです。



「Kreski -Lines-」

自分のマシンのアイコンをカスタマイズするもよし。

webデザインに盛り込むもよし。

気になる方は使ってみてはいかがでしょうか。

オンラインでＣＳＳメニューを作ることが出来るサイトをご紹介。


「 ＭｙＣＳＳＭｅｎｕ 」


　

始まりましたね、Yahooのインデックスフルアップデート。

前回の6月に引き続き、3ヶ月おいての今回。

おそらくは昨日の夜とかから開始された様子。

様々なところで利害・弊害が出てるようですが・・・

Yahooの公式でも開始が発表されているようなので、今回の順位変動は避けられない事。

しかし、上がり幅が大きい物もあれば、下がり幅が半端ない物もありまして。

我々、制作サイドの人間には、なんとも言い難い感じである。

月曜日あたりには落ち着くんじゃないかとのボスの予想でにらめっこは一時保留。

しかし、意味が無いとはいえ、何故かバリデータチェックなんかしてみたりする。

うーん、早く落ち着いてほしい。

ただ、それだけ。

最近制作で手書き風のフォントを使いたくなったのでいろいろ調べてみました。

フリー、シェア、商用利用不可も含めると様々あるようです。

代表的なものを少しご紹介します。


「ミウラFONT」無償＆有償版あり。


「みんなのうた」商用利用不可。


「あんずもじ」ライセンスについては記述なし。


「みかちゃん」基本的にフリー。


「ふい字」基本的にフリー。


企業サイトなどではあまり使う機会は少ないですが、手書き風フォントを使うとサイトイメージが一気にそれらしく変わります。
女性的なやわらかさを演出したいときや、ナチュラル感を演出いたいときなど、様々なシーンに使えますね。

「ここぞ」というタイミングで使ってみてください。

とても素敵なタイポグラフが紹介されているサイトです。

タイポグラフはwebデザイナーよりも、どちらかと言うと、グラフィックデザイナーよりな
話題にはなってしまいますが、web関係者でも無視はできない所。

インターフェイスデザインも重要ですが、人が眼で認識するのは、文字や写真。

ホームページの一要素として、タイポグラフィーも勉強しましょう。

写真を簡単にイラスト風に加工してくれるサイト。


「Befunky - Cartoonizer」




似たようなサイトはたくさんありますが、とりあえず操作が簡単で
わかりやすかったのでご紹介。

かけられるエフェクトも沢山あり、時間がないときなど
サッと作れるので楽かも。

web2.0風の艶っとしたキレイなアイコンもいいけど、たまにはちょっと崩したものが欲しくなったりしますよね。

そんなときに使えそうなフリーのアイコンセットを見つけました。

「Handycons」



ちょっとアクセントが欲しいときや、そういったデザインのサイトの制作時に使えるかもしれません。

気になる方はお試しを。