ウェブデザイン Archive

山形総合青果ホームページ開設しました！

山形総合青果様よりご依頼頂いたホームページが完成し、正式に公開いたしました。

山形総合青果様ホームページはこちら

今回は、以前ＣＭＳで構築したホームページを、運営会社の変更に伴い内容変更等の作業を致しました。

旬で美味しい果物や野菜の情報がたっぷりです！是非ご覧下さい。

あなたが、ホームページを運営する目的はなんですか？

会社や商品の宣伝、オンラインショップの運営などなど・・・お客様によって千差万別。しかし、制作や運営していく上で共通することは、「ホームページを見る人」がいなければ無意味ということです。

ホームページのアクセスアップを図るためには、様々な方法があります。また、アクセス数が増えても、デザインが奇抜であれば逆に悪い印象になります。ウィ・ドックでも、このバランスを最重要課題として制作しておりますが、あなたの運営しているホームページはいかがでしょうか？

例えば・・・「デザインや文字が崩れて、印象が悪いホームページ」

自分のホームページはよく見ているから大丈夫！本当にそうでしょうか？

実は、同じホームページでもその人が使用しているブラウザが違うと、表示が異なる場合があります。今、世界の７割程度の人が、「Internet Explorer」というブラウザを使用していると言われています。しかし、それ以外は「Firefox」「Safari」などを使用しています。

ちなみに、私は「Firefox」を利用していますが、文字が重なって見えない、レイアウトが崩れているホームページをよく見かけるます。

・・・しかも、他社制作会社ホームページにも意外と多いのです。

同じページを「Internet Explorer」で見ると、きちんと表示されているのですが・・・これでは、見る人のためのホームページとはいえませんよね？しかも、同じ「Internet Explorer」でもバージョンによっても表示が異なります。

（あまりにも利用が少ないブラウザなどは、数に入れない場合もあります。）

ブラウザは、無料でダウンロードできるものも多いです。

はたして今運営しているホームページが見る人のために制作されているのか？

是非確かめてみてはいかがでしょう？

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

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

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

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

ホームページの更新はそれなりに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などで対応することもできる。私もいくつかダウンロードしてたまに使わせてもらってます。

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

★使えるオススメ素材集