デザイン関連 Archive

寒河江市商工会ホームページがリニューアル
寒河江市商工会よりホームページリニューアルの依頼を受けて制作作業を行っておりましたが、先月に完成し正式に公開いたしました。

寒河江市商工会ホームページ

今回のホームページでは、主ぬホームページの更新管理を職員で行いたいとの要望を受け、CMSにて構築しました。また、100万会員ネットワークの導入に伴い、寒河江市商工会ホームページのトップページへ、SHIFTのデータ読込欄を設けております。

完成後、操作説明会を開催いたしましたが、わかりやすく利用しやすいとのお話をいただけてホッとしています。

当社のチラシ作成サービスの見積額に驚愕
先日、お客様からのご依頼で、チラシを作成いたしました。そのときにご担当の方といろいろなお話をさせていただきましたが、まだまだ高いお金を払ってチラシやパンフレットを作成いるんだなぁと思いました。

そのお客様の場合、地元の印刷屋さんにデザインから印刷まで、すべての作成業務をお任せしていたとのことで、A4版両面フルカラーのチラシ3,000部で、およそ12万円だったそうです。しかも、今回のお客様の場合、2種類のチラシを同時に発行していたので、費用はその倍で24万円程度かかるとのこと。

今回、当社のホームページをご覧になったお客様より、かなりの費用削減ができそうなのでご相談させてくださいとのことで、ご連絡をいただき、上記の内容で、当社のお見積をさせていただきましたところ、その安さにかなり驚かれた様子でした。

ちなみに、これまでのお客様のチラシ作成費と当社で作成した場合の費用の比較表がこちらです。

上記のとおり、かなりの費用が削減できることがわかると思います。

デザインデータ納品が便利
ちなみに当社の場合は、デザインのみを作成し、作成したデータを納品させていただくといった形式となります。この形式にすることにより、次年度も同じような内容でチラシを発行する際は、お客様ご自身で日付のみを変更して再利用することが可能であること。この点が、お客様にはとても便利と感じているようです。

印刷はインターネット印刷サービスを利用！
印刷は、地元の印刷屋さんにお願いするかもというお話でしたので、実際に依頼する前に、デザインデータを入稿した場合の印刷代をお見積してはいかがでしょうとご提案しました。ということで、地元の印刷業者へ見積依頼したところ、その費用はなんと80,000円！デザインもしないのに何故こんなに！？・・・正直、びっくりです。ちょっとぼったくりすぎじゃ？と思いました。

そこで、お客様には「インターネットを利用した印刷サービスがお得ですよ。」をお話したところ、「そんなに安くできるんですか？」と驚いていらっしゃいました。知らないと損をするんですね～(笑)

このときに、お客様にご紹介した印刷サービスがこちらです。

印刷データをこの印刷ネット通販 グラフィックにデータ入稿するだけの簡単な手続きだけで、格安で印刷できる便利なサービスです。私自身もよく利用しているサービスで、お勧めの印刷サービスですね。

気になる印刷のクオリティは？
ここまでの説明で、インターネット印刷サービスが格安でできることはおわかりいただけたかと思います。さて、次に気になる点としては、「印刷の質」だと思います。この点については、私自身もこれまで数十回利用していますが、一度も不満を抱いたことはありません。仕上がりを見ても、色むらも無く、写真などの明暗の階調も十分満足できる品質です。

インターネット印刷サービスを利用する際の注意点！
印刷会社にデータ納品をする場合のデータ作成には、DTPならではの様々な制限事項があり、素人の方がデザインデータを作成するのは、なかなか難しいと思います。質の良いデザインデータを作成するには、それなりに知識を持ち合わせたプロにお願いするのが、失敗の無い一番良い方法です。

過去に、私の知っている、あるウェブデザイナーさんが印刷サービスを利用しようと、チラシデザインを自分で行い、データ納品しようとしましたが、データ不備があり、何度も修正を行うはめになり、結局、自分で作成するのはあきらめたそうです。このように、ウェブデザインの仕事をしているからといって、DTP（印刷物）のデザインも手軽にできるわけではありません。DTPのデザインデータの作成では、知識がないとできないと思った方が無難です。ただし、デザインデータは、入稿後に必ず行われる「データチェック」がありますので、万が一、デザインデータに不備があっても、そのまま印刷されることはありませんので、ご安心ください。

≫ ウィ・ドックのDTPデザインサービス

以上のように、すべて自分で行うとなると、かなりの知識と手間がかかりますが、「デザインはプロに任せる」ことを前提に考えれば、非常にお得に印刷物を作成できます。まだ、ご存じ無かった方は、是非一度お試しください。

★DTPデザインの必須ツール

ホームページの更新はそれなりに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