デザイン関連 Archive

ホームページの更新はそれなりにHTMLの知識などが必要なわけですが、まったくHTMLの知識が無いお客様からの要望で簡単に更新できないか良く相談を受けることがあります。更新と言っても、その内容は様々な訳ですが、今回は、簡単にHTML内に表組みを挿入できる、更新の方法を紹介しましょう。

外部CSVをHTML内でテーブル表示させる方法
簡単な流れは、Excelなどで作った表を元に、CSV形式のファイルを作成し、Jquery+プラグインを使用して実現します。

1. 必要なファイルの入手
まず最初に、以下の2つのファイルを入手します。（※以下のリンク先よりダウンロードできます。）

1. jquery.js
2. jquery.csv2table.js

2. 表の作成
Excelを使用して、出力したい表を作成します。最初の行には、見出しになる項目を設定してください。2行目以降はそれぞれのデータを入れます。

3.CSV形式で保存
Excelで作成した表をCSV形式で保存します。まず最初に、表を表示させるHTMLファイルと同じ階層に「data」という名前で新しいフォルダを作成します。次に、CSVで保存します。「ファイル＞名前を付けて保存」を選択し、「ファイルの種類（T)」の箇所で「CSV（カンマ区切り）（*.csv）」を選択します。

4. 既存のHTMLファイルの設定
HTMLのヘッダー内に、手順1でダウンロードしたJSファイル（jquery.jsとjquery.csv2table.js）を読み込むための記述をします。

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.csv2table.js”></script>

5. 表出力のための設定
HTML内の作成した表を表示したい箇所に、作成したCSVファイルの読み込みのための設定をします。HTMLの表を表示させたい箇所に以下のように記述をします。

<div id=”view1″></div>
<script>
$(function(){
$(’#view1′).csv2table(’./data/whatsnew.csv’);
});
</script>

以上で設定完了です。

補足事項

1. HTMLの文字コードにUTF-8を使用している場合は、手順3でCSVに書き出したファイルでは2バイト文字（日本語）は文字化けしてしまします。これを改善するには、一度書き出したCSVファイルをメモ帳で開き、内容はそのままで「名前を付けて保存」を選択、文字コードの欄の「ANSI」となっている箇所を、「UTF-8」に変更して保存します。
2. 表のデザインをカスタマイズするには、「jquery.csv2table.js」をメモ帳などで開き、任意の箇所を書き換えることで変更できます。ただし、HTMLとCSSの知識が必要です。

デザインのネタ探し
毎日デザインの仕事をしていると、どうしてもデザインのネタに困ることがありますね。そんな時、みなさんはどうしていますか？私の場合は、とりあえずは一旦仕事を中断して頭をリセット。その後、あちこちのサイトを回ってみたり、素材を配布しているいわゆる素材集サイトなんかを覗きにいきます。重要なことは、一旦頭をリセットすること。これで先入観なしで、他人のデザインを見ることができ、自分なりの新しい案が出てきます。一度試してみてくださいね。

デザイナーお助けサイト
でも、自分で一からデザインするのは結構な手間が掛かりますよね。そこで今日は、デザイナーには、とっても便利なお助けサイトを紹介しましょう。

Free Vector Graphics

このサイトは、いわゆる素材集サイトのようなものなんですが、単なる素材配布サイトではありません。ここでは、編集加工ができる、ベクター形式の画像を配布してくれている超役立つサイト！デザイナーの多くが使っているIllustratorやPhotoshopなどでそのまま使える点が便利。拡張子は「ai」「eps」「jpeg」などの形式で配布されていますので、ダウンロード後、そのまま使える優れもの。

ただし、「ai」などはIllustratorのバージョンによっては開けないこともあります。その場合は、epsかjpegなどで対応することもできる。私もいくつかダウンロードしてたまに使わせてもらってます。

デザイン作成の時間短縮にもなるし、中にはかなりクォリティの高いベクター画像もあるので、是非使ってみよう！以下はダウンロードできる画像のサンプルです。

★使えるオススメ素材集

スムーズスクロールは格好いいけど・・・
ホームページの1ページが縦長になってしまう場合、ページ内リンクを設置して、より情報を探しやすくする手法はよく用いられますね。単なるページ内リンクをするだけなら誰でも簡単に導入できるわけですが、ちょっとでも格好良く見せたいところです。そこで、良く使われるのがJqueryと「smooth.pack.js」を使ったスムーズスクロールの方法があるわけです。

スムーズスクロール「smooth.pack.js」の問題点
スムーズスクロールを実現するのに、あちこちのサイトでよく使われているのが「smooth.pack.js」というものだと思いますが、実はこの方法にはちょっと問題があります。このスクリプトでは、nameタグを使用してページ内の任意の位置にスクロールさせるわけですが、この方法では、現在のホームページ作成に求められる「ウェブ標準」の仕様に反する手法になっています。ウェブ標準ではXHTMLでコーディングするんですが、XHTMLではname属性だけのアンカーは使えないんですね（厳密には推奨されていないというべきか・・・）。

そこで取られてきた方法として、アンカーに以下のように記述する方法があります。

<a name=”top” id=”top”></a>

しかし、どうもスマートじゃないですね～。実際には推奨されていないname属性も使われているわけだし・・・。

ウェブ標準に準拠したXHTML対応版スムーズスクロール
そこで、あちこちググって探し回ってみたところ、「smooth.pack.js」の変わりになるものを見つけました。
http://coliss.comに「Page Scroller ver.3」なるものがあり、このスクリプトではid属性を使用してスムーズスクロールを実現できます。これにより、XHTMLにも準拠した正規の記述方法でページ内リンクをスムーズスクロールさせることが可能になります。

設置方法は簡単で、ヘッダー内に「Jquery」と「page-scroller.js」を読み込むためのタグを挿入するだけです。みなさんも是非使ってみてください。

★Jquery関連オススメBook

WordPress用ショッピングカートプラグインの検証
今、私が構築しているサイトはWordPressを使ってCMSを構築しているんだけど、今回のサイトでは、ショッピングカートも導入する予定です。で、できれば、WordPressの中で手軽に動かせるようなショッピングカートのプラグインなんかを使いたいところだけど、テスト用サイトでいろいろ試した結果、現在のプラグインではちょっと使えないな・・・という私的な率直な感想。

ということで、今回検証したのは以下の3つのショッピングカート用のプラグイン。

• WP e-Commerce
• YAK for WordPress
• PrestoGifto

まだ日本語環境で安心して使えるカートプラグインは無い
この3つのプラグイン、すべて外国で作られたプラグインで、日本語の環境で使うことを前提に作られていないというのが難点ですね。2番目の「YAK for WordPress」では、一応、日本語化されたファイルも公開されているということで、試しに使ってみましたが、安心して実用できるかと言われると、ちょっと疑問＆不安が残ります。

早々に日本語完全対応のWordPressショッピングカートプラグインの開発を望む
ということで、私的に、今現在は日本の環境でそのまま使えるような、WordPress用のショッピングカートプラグインは存在しないという結論です。これだけWordPressでのCMS運用も広がってきていて、ショッピングカートのニーズもかなりあると思うんですが、未だに対応したプラグインがないというのは、ちょっと残念ですね。かといって、自分で作れる程のプログラミングの知識も持ち合わせていませんので、大きな事は言えませんが。。。（-_-；

どなたか、早々に日本語に対応したWordPress用のショッピングカートプラグインを開発してくださぁ～い！

★WordPress関連オススメ書籍

カメラマンにプロもアマもない！
私もカメラマンの端くれとして、近年いろいろと活動していますが、プロのカメラマンとして活動していく上で、まず疑問に思うこととして「プロのカメラマンとアマチュアのカメラマンの違いって何?」と率直に思いました。そこで、いろいろとネットで探ってみました。あちこちのサイトでいろんな人が、いろんな意見を述べてますね～！

ということで、その内容をちょっと紹介します。

1. お金をもらって撮影するかしないか
2. 作品のクオリティはある程度レベルに達しているか
3. 豊富な撮影経験
4. 撮影時”こだわり”を持って撮影しているか
5. お客の望む依頼内容を満たした写真が撮れるか

さて、この中で明確な「プロ」の定義というと、1番目のお金をもらって撮影するかどうかという点。それ以外に関しては、カメラマンの技術や感性に左右されていることから、一概に「これ！」という決まり事はないですね。2～4番も結局は5番目に集約されているような気がしますね。

下手でもなれるプロカメラマン
でも、お客が満足していなくても、プロのカメラマンとして活動している人はたくさんいます。例えば、私は以前、あるホテルに勤務していたことがあるんですが、結婚式のときなど、町のカメラ屋さんが写真撮影するわけですが、「何これ？」みたいな、ろくな写真がないですね。正直、「私の方がずっ～～～っと上手く撮れる！」・・・と思いますヨ。

誰でもなれるプロカメラマン
では、話変わって「プロとアマの違い」とは別に、プロカメラマンになるにはどうすればいいのか、何か決まり事があるのか？あちこち調べた結果、プロカメラマンには資格もないし、これまた明確な定義が存在しない。あなたが名刺に「カメラマン」と一言書けば、はい、カメラマンの一丁上がり！という感じ・・・いいのか、これで？

ということで、私も仕事上、あちこちで写真撮影の依頼を受けるわけで、写真のクオリティは有名プロカメラマンには及ばないものの、素人よりは上手に撮れる自身がある点。また、撮影にはそれなりに時間もかかり、手間も掛かることから、これもサービスの一つとして、お客様に提供していこうと思います。

もし、それなりに綺麗な写真が撮りたいなら、格安で撮影依頼をお受けしますので、是非、ご用命くださいm(_ _)m

★撮影テクニックを磨くためのオススメ本