viviのホームページ作成奮闘記

本広告は、一定期間更新の無いブログにのみ表示されます。
ブログ更新が行われると本広告は非表示となります。

  

こんなサイトを発見！！
[WEBデザインのクリップ・リンク集]
いいデザインがそろってます！！
メインはFLASHでしょうか？
Flashサイトの参考に是非！！  

ひさびさの更新です。
最近wordpressを使ってみました。

公式サイト

公式サイトにはこんな風に記載されてます。
//////////////////////////////////////////////////////////////////////////////////////////
WordPress (ワードプレス) は、オープンソースのブログ／CMS プラットフォームです。
セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを
意識して開発されており、無料でダウンロードして使うことができます。
//////////////////////////////////////////////////////////////////////////////////////////

うそじゃ無い感じです（笑）。

普段MovableTypeを使用しているので、
これとの違いを少し紹介します。
・MTでは再構築の時間がかかり多少ストレスですがwordpressでは、そもそもの
原理が違うようで、再構築がない。
・管理画面の写真のアップロードなどの操作性が簡単
・デザイン性のあるテンプレートが豊富で簡単に変更できる

等々…。そんなところでしょうか？
まだまだ使い始めですので、カスタマイズがどのように行うかは
MT程すらすらわかるわけじゃありません。

ブログを書く。写真をアップロードする。
そんな操作は明らかにMTよりは簡単と感じます。

初心者ですので
具体的な感想はできていないかもしれません…。
すこし使い込んでなれてきましたらまた書き込みます。

今日は個人的に感じた部分を少し…。
…ということで。  

ホームページにはよくサイドナビがあります。
さてさて、右と左ではどんな使い分けがされているのでしょうか？
知ってますか？

そのページのコンテンツ。つまり本文が重要なサイトは
サイドナビは右側にあります。逆に、サイドナビでのページの誘導を
していきたい時には左サイドのナビが適切です。

なぜでしょう？？
人は画面を見るとき、ついつい左から右へ。上から下へ目線を移動させる
傾向にあります。
左側にあるものを最初に認識するわけなのです。
なので、最初に目につきやすく、見つけやすいため、ページの比重がコンテンツ
なのか、ナビなのかで左サイドナビと右サイドナビを使い分けるようです。

確かに、それを意識してサイトをみていると、そんな心理を取り入れているサイトは
たくさんありました。

うまくできてますねぇ〜。  

面白い記事を発見しました。
////////////////////////////////////////////////////////////////////////////////////
■YahooとGoogleユーザーがクリックする物の違い
訪れたユーザーの行動を見ると、YahooとGoogleのユーザーの質は大きく異なっている。

というのも、サイトを訪問したユーザーが、『次に何をクリックするのか』という点が、その二つの検索エンジンから来るユーザーによって、大きく異なるのです。

Yahooユーザーのクリック傾向

* 一番大きなバナー画像
* セールというテキストを含むリンク
* テキストが書かれているつやのある画像ボタン


Googleユーザーのクリック傾向

* セールというテキストを含む画像
* ランキングというテキストを含むリンク
* 商品の画像


そう。グーグラーたちは、ランキングが大好物なのです。逆にYahooは大きな画像に興味を持つという傾向があります。
////////////////////////////////////////////////////////////////////////////////////

ここまでです。
みなさんはどっちですか？？

詳しい記事はこちらです。
↓
http://e0166.blog89.fc2.com/blog-entry-597.html  

http://designsozai.com/
http://www.image-seed.com/
http://www.matemp.com/

フリー素材のアイコンを探すとき結構手間ですよね。
そこで、今回は今風のデザインで結構使える素材を提供しているサイトを
ご紹介します。
  

クリーンショットはどのようにとられているでしょうか？
PrtSc（プリントスクリーン）キーを、利用されている方も多いと思います。
その後、ペイント等を起動させて貼り付けて加工するなどされているのではないかと
思うのですが、そこで減色や加工など、かなり編集される場合はともかく、
そうでなければできれば手間を省いて、直接画像ファイル化した方が
作業効率がアップするのではないかと思います。

そこでご紹介するのがこれです。
http://www.woodybells.com/winshot.html
WinShotといいます。

最初から、任意の範囲を自分で選択してスクリーンショットを
取ることが可能な大変便利です。
自由に範囲選択して、余分な箇所をカットして、問題がなければ
その範囲を切り取って画像ファイル化して保存してくれるのです。
この一連の作業が、本体のダイアログボックスを出すことなく完了できます。

※vistaでは多少使えない機能があるようです。
　詳しくはサイトをご覧下さい。  

Flashサイトは重い。
時間がかかる…。
ということで敬遠されがち…。

ですが、Flashの最大の特徴をしっかりと活かしたサイトは
みてて清々しいです。

ビジュアルメインで目的が明確なFlashサイト。

コーポレートサイトで無駄に動く部分を作ったり、
変にこだわったサイトがFlashをマイナスなイメージに持っていっているのです。

どんなことでもそうですが
WEBの場合デザインの云々よりも大切な事。
「目的が明確なこと」

このサイトでストレスを感じる人はそんなにいないんじゃ
ないかな〜。（勝手な自己判断ですが…。すみません。）

  

デザイン会社がつくるご結婚＆ご出産のご報告はがき・印刷のサイト

ここ、なんとな〜くいいセンスが漂ってくる見せ方です。
イメージの見せ方なんてさすがプロってかんじ。

EC-CUBEを使っているようです。
ちなみにEC-CUBEはフリーのECサイト構築ツールですが、
とても高機能です。
会員登録はもちろん、売上げ管理、顧客管理、納品書発行など
さまざまな機能が標準で搭載されてます。

EC-CUBEの公式サイトはこちら
http://www.ec-cube.net/

ちなみに、茨城県だと下記のWEB制作会社に実績があるようです。
（EC-CUBE公式サイトの制作会社一覧参照）
http://www.tounichi-g.co.jp/
http://www.cocoro.co.jp/

EC-CUBE…。
あなどれない（？）感じです。

  

こちら、ご存知の「花王」のサイトの一部をキャプチャしました。
文字（フォント）に注目。

これ「メイリオ」といいます。
WinVistaの標準？フォントになりますので、XPには搭載されてません。

私的な意見ですが、見やすくて好きです。
ゴシックでもなく、明朝でもない…。そんな位置づけかと思います。

普及させたいフォントです！
Macでも、Office 2008をインストールすると使用できますし、
XPの方でも、検索するとダウンロードできるサイトがあります。

是非インストールして見て下さい。  

最近この手のポータルサイト多いですね。
でもでも中途半端なものが大半。この二つはなかなかかなーと
（上目線でちょーしこんじゃいますが…。）いい出来だと思います。

去年から現在にかけて、ポータルサイトは爆発的に増えました。
その中で収益や人気を維持するのも大変かと思います。
これからはどういう方向に進むか…。見物ですね。

  

XHTMLなのにXML宣言をしていないサイトって結構あります。
宣言しない理由としては、以下のようなことが考えられます。

1. Win IE6の環境下において、互換モードで表示されてしまう
2. 文字コードが「UTF-8」または「UTF-16」の場合は
　　 XML宣言自体を省略することが出来るから
3. HTMLからXHTMLに変えたばかりで、理解していない

等々…。

でも一番の原因は１のIE6の環境下において、互換モードでしょう。
・全体をセンタリングする際にtext-align:centerも追記しなければセンタリングされない
・ボックスの解釈の違い
など、いろいろな不都合が発生してきます。

XML宣言についてはXHTMLでは必須項目？？のようになっています。
不都合があってはつける意味がありません。

ケースバイケースで適切に使い分け。
そんなところだと思います。
  

これは何かといますと。
じつは、これ一つで、IE5.5、IE6、IE7、IE8 beta1 の確認が出来てしまうんです。

WEBサイトを制作する際に、PCが一つしかないけど、IEのどのヴァージョンでも
みられるようにしたいというかたにはオススメです。

フリーソフトなので、使っていて多少のバグもある感じですが、
確認するだけのものと考えればそれほどストレスではありません。


  

みなさんはWEBデザイナーと聞いてどういう仕事を連想するでしょうか？

ページのデザイン？
コーディング？
企画・設計？？
プログラム？？？

そう、あいまいなんですね…。
でも、これからの時代「WEBデザイナー」を名乗るのであれば
必要なスキルは「WEBサイトを公開できる」能力。

これも曖昧ですので、
企画・立案を行い、
それに準じたサーバーを立てたれ（選べる）、
デザイン・設計をスマートにこなし、
プログラムの仕組みを理解し適切に使い、
コーディングをおこない、プログラムを実装でき、
そして、公開・運用できる。

そんなところでしょうか。
もちろん、分業でそれぞれの分野に応じて振り分けるのも可能です。
しかしそれでは「WEBデザイナー」ではありません。

プロデューサー・ディレクター
ページデザイナー
コーダー
プログラマー　　　　　　　　です。

全て行える人=『WEBデザイナー』。

プログラムなどでシステム開発がWEBに組み込まれるこの時代。
プログラムが分かりませんでは通用しません。

と、自分に言い聞かせております…。
  

Flashサイトですが、プロモーションサイトとしてはちょっと気になるサイトです。
なんかこう、男心をくすぐるというか…。

なんか、見ていると買いたくなっちゃうような…。
そんな感じのサイトです。

直接的に商品のアピールをするのではなく、
間接的に、そう、結果的に商品を買うような行動にもっておこさせる
そんな心理状態をうまく活用していると思います。

印刷物等では、昔から商品を直接PRするやり方でしたが、
WEBでのPRはこういった間接的のものの方が成功事例が多いです。

ちょっと、結果がどうなるか楽しみです。  

4年前には10台中ほぼ9台のコンピュータで使われていたMicrosoftのWebブラウザ「Internet Explorer（IE）」が、今年3月にそのシェアを3台中2台にまで落としたそうです。

う〜ん。私的には歓迎…。でしょうか。

ホームページを作成する時にやはり気をつかうのが、このブラウザチェック。

現在はIE6〜8、Firefox、Safari、opera…。
WinXP、Vista、MacOSXの3パターンで完璧に見られるようにしています。

IEのシェアが9割だったころは、簡単だったんだろーなー。と
おもいながらいつもチェックしています。

統一の規格でブラウザを作ってもらいたいです…。
  

レイアウトを行う際、スタイルシートを使用し小さめの文字サイズで固定しているサイトが多々ある。この場合、ユーザー自身で文字の大きさをコントロールすることが不可能になってしまう。

文字の指定をする場合は、絶対単位よりも相対単位で文字サイズを指定するほうがよい。閲覧者がフォントサイズを、自身の環境や状況に合わせて最適なサイズに変更できるよう、配慮する必要がある。

また、文字サイズを相対で指定したとしても、多くのユーザーはブラウザで文字サイズを変更するのを面倒に感じるため、コラムやニュースなどの文章を読ませるコンテンツは、あらかじめ文字サイズを大きめに設計しておいたほうがいい。

※相対的な単位とは、em や ％ などのこと。
　  

代表的な二つのフォント、ゴシック体と明朝体。明朝体には見た目が美しく読みやすいという特徴があり、対してゴシック体には、認識しやすく印象に残りやすいという特徴があります。

とはいえ、それは紙面上でのことで、Web上（モニタ）では一概にそうとも言い切れない。画像として書き出す大きめの文字には明朝体もいいが、ユーザーに読ませるためのテキストはやはりシンプルなつくりのゴシック体の方が読みやすい。

明朝体はゴシックに比べるとつくりが細かく、そのような細い線は解像度の低いモニタで閲覧すると、潰れて見えてしまう可能性もあります。

WEBと印刷物は似ているようで全くちがいますね〜。

“和”を表わすために、読ませるための部分まで明朝体にしているサイトがたまに見かけるが、“和”のイメージは画像や色彩のビジュアル面で表現し、テキスト部分はゴシック体で表示した方が読みやすい。

また、各種ブラウザの表示の違いも要注意！。FirefoxやNetscapeはInternet Explorerと違い、表示フォントがデフォルトでは明朝体に設定されている。CSSの「font-family」を用いて、フォントの指定を行うことを忘れてはいけません。

ちなみに、viviのブログはvistaで標準搭載されているメイリオというフォント。
これがインストールされてないフォントはゴシックになってます。個人的にメイリオは
みやすくて好きです。  

シックスアパートが出している、Movable Typeの公式タグの本です。
MTを構築する際には重宝します。  

HTML／CSSのチェックツール。
これに合格すればとりあえずはオッケー（?!）

■HTMLチェックツール
http://validator.w3.org/

■文法チェッカー
http://www.esitenet.com/htmllint/htmllint.html

■CSS検証ツール
http://jigsaw.w3.org/css-validator/  

あると便利チェックツール。
自サイトの目安に…。

■キーワードアドバイスツール
オーバーチュア社が提供するツールでキーワード分析のために利用するツールです。
過去１ヶ月間に検索エンジンで実際に使われた検索語の検索回数が表示されます。

■キーワードアドバイスツール
http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp

■ページ内リンク数チェックツール
http://www.su-jine.com/sujine_seo_included_links.php

Googleリンク数チェックツール
http://www.su-jine.com/sujine_seo_backwardlinks.php