制作事例 椎谷板金工業様

siiya

 

屋根、外壁、雨樋から採光システムまで、
快適な暮らしのための修理・施工工事は私たちにお任せください。

公開 2015年4月17日
URL http://www.yane-toi.com/
TYPE コーポレートサイトリニューアル
CMS Wordpress

●リニューアル前の課題と要望
・新しい事業(採光システム)始めるにあたってホームページに情報が無い。
・デザインが古いので新しいデザインにしたい。
・施工実績も更新できるようにしたい。

●リニューアル後
・CMSを導入することにより、施工実績を更新できるようにした。
・新しい事業(採光システム)のページを増やし業務内容を充実した。
・サイト内構成を整理して、ユーザーの導線を明確にした。


ディレクターとデザイナーのイメージ共有

business_2_mika

4月に入りまして、花粉さえ飛んでなけれは、
いい季節になりました。

今回は、デザイナーに作業をお願いするときに
気を付けていることをまとめました。

PAK88_tetuyaakenosyain20141123141151500

私は、普段webディレクションの仕事していて
お客様から聞いてきた内容を元に、構成案とデザイン案を制作します。
構成案は自分で作成すればよいのですが、ページのデザインはデザイナーにお願いします。

デザイナーへの説明がうまく伝わらないと、
「イメージと全然違う」
「何度も修正が入って予算をオーバーしてしまった」
などのトラブルが起こってしましまいます。
ドラマで良くある「○○君これお願い。」みたいに何の説明もなく
仕事が上がってくることは、ほぼありえません。

上記のトラブルが起きないよう
私がデザイナーにお願いするときの注意点をまとめてみました。

 

1.情報、目的、サイト構成の説明
D0011_udemakuri420140830142954500
デザイナーにお客様の情報や目的、サイト構成を説明するようにしています。
まずは、ディレクターとデザイナー同じ情報を共有することがスタートラインです。
ここをおろそかにすると、後々大きなズレが生じる場合があります。

 

2.掲載情報
AL001-1onakakaigi20140830500
掲載内容と情報の順位付けを行い指示します。
デザイナーが構成に時間をかけて、後ですりあわせを行うよりも、
はじめから指示をした方がスムーズに作業を行えます。

 

3.色の指定
PAK85_iroenpitunaname131310500
メインカラーを指定します。
お客様指定の場合もありますし、デザイナーと相談して決める場合もあります。
どちらにしろ明確に指示します。
サブカラーは状況に応じて指示しています。

 

4.テイストの近いサイト
Green15_jyougi20141123165428500
他のサイトを使ってイメージやデザインの方向性を伝えます。
最低3~4サイト用意します。
コピーサイトにならないように、
全体の雰囲気や部分的に参考にするなどサイトによってどこを参考にするのか説明します。
デザイナーに考える力をつけるにはこの方法はおすすめしませんが、
私は、感覚・雰囲気など、言葉で明確に表現しにくい部分を共有するために使用しています。

 

5.スケジュールの確認
PAK85_yoteihyouwotukerubiz500
今持っているスケジュールを確認して無理のない納期を設定します。
あまりにも短納期で仕事を詰めすぎると、それなりのデザインしか上がってきません。
全ての仕事でできるわけではありませんが、意識して行っています。

 

まとめ
以上の点を意識して行っていますが、
いきなり100点のデザインは上がってきません。
デザイナーがお客様と直接お話しできれば、デザイナーの能力の問題となりますが、
お客様 → ディレクター → デザイナーの場合は、
ディレクターがお客様の話をまとめて、デザイナーに指示していますので、
半分はディレクターの責任だと思います。
「思ったものをあげてこない」ではなく、「思ったものをあげてもらう」ために何をするかが大事だと思います。


Snipping Tool(スニッピングツール)という画面キャプチャソフト

 

今回は、Windows Vista(Home Basicは未実装)以降のバージョンに実装された画面キャプチャソフトです。

今更?って思う方もいるでしょうが、正直言うと知らなかったんです(笑)
元々、画面キャプチャソフトは昔からシェアウエアを使用してた為、
必要がなかったのです。
今回、お客様に簡単に画面キャプチャを取ってもらうために
何かいいソフトはないか調べていたら、
WindowsにSnipping Tool(スニッピングツール)があることを知って、
ビックリ!!
こんないいソフトがあったなんて・・・

なので、今更かもしれませんが紹介します。
画面キャプチャソフトとは?パソコンの画面に表示されているものを
画像にして保存するソフトです。
全体画面キャプチャは、キーボードの右上に「PrintScreen」と書かれたキー(「PriScr」と略されていることもあります。)を押せば、取ることはできます。
では、Snipping Tool(スニッピングツール)を使うと何ができるかというと
1.自分の好きな形に取ることができる。
2.取った画像に直接マウスで文字が書ける。
3.そのまま別のソフトに貼り付けや画像として保存できる。

それでは、説明してきますね。

まず、Snipping Tool(スニッピングツール)は
Windowsの「スタート」→「すべてのプログラム」→「アクセサリ」の中に「Snipping Tool」があります。

01
Snipping Toolが立ち上がると、ウィンドウが出現し、背景が白いマスクがかかった画面になります。
1.自分の好きな形に取ることができる。

操作ウィンドウの「新規作成」の▼から切り取りの方法が4種類選べます。
・自由形式の領域切り取り
・四角形の領域切り取り
・ウィンドウ領域切り取り
・全画面領域切り取り

02

・自由形式の領域切り取り
マウスをドラッグした形に切り抜けます。一筆書きになるので注意!

03

04
・四角形の領域切り取り
マウスをドラッグしたエリアを四角形に切り抜きます。

05

06

・ウィンドウ領域切り取りは選択したウインドウを切り抜きます
・全画面領域切り取りは文字通り全画面を切り抜きます。
2.取った画像に直接マウスで文字が書ける。
画面キャプチャ後、「ペン」のボタンを押した状態にすると、直接マウスで文字が書けるようになります。
画像の注意点や指示など書くことができます。(フリーハンドです。)

07
※消しゴムを使うと簡単に消すことができるので何度でもやり直せます。
3.そのまま別のソフトに貼り付けや画像として保存できる。
画面キャプチャ後に「コピー」のボタンを押しすと別のソフト(Word、Excel)に直接貼り付けることができます。

「保存」のボタンを押しすと画像ファイルとしての保存が可能(保存形式はJPEG・HTML・PNG・GIF)

08

 

●こんなこともできます
例えば、以下のようにウィンドウの「メニュー」一覧など通常の方法では、うまく取り込む ことができません。

09

こんな時は、Snipping Toolを立ち上げた後、一旦「Esc」キーを押して、Toolを非アクティブ状態にします。その後、キャプチャしたい「メニュー」を表示状態にし、そのまま「Cttl」キーと「PrintScreen」キー両方を押します。こうすることで、メニューが表示されたまま、Snipping Toolが起動しますので、あとは今まで通りの方法でキャプチャするだけです。意外と簡単にできますので、是非試してみて下さい。


制作事例 新潟サンライズゴルフコース様

sunrise

新潟県北蒲原郡聖籠町にあるゴルフ場です。
27ホールのパブリックコースで、ゆったりと大きなゴルフを楽しめます。

公開 2015年3月5日
URL http://www.nsgc.jp/
TYPE 施設サイト(スポーツ)リニューアル
CMS Wordpress

●リニューアル前の課題と要望
・イベントなど自分たちで更新できるようにしたい。
・スマートフォンにも対応できるようにしたい。
・すっきりしたデザインにしたい。
・コース情報をプリントできるようにしたい。

●リニューアル後
・CMSを導入することにより、イベント、お知らせ、だけではなく
定期的に変わる項目を更新可能。
・サイト構成を見直しを行い、グローバルメニューを減らしシンプルな構成に変更。
・コースページを全体、各エリア、各コースとA4でプリントできる。
・スマートフォン用に表示の切替。