PORTFOLIOFrom DTP design to WEB design

Nami Shimizu Design Works

神奈川県のとある病院にて、産婆をしていた

祖母の手で取り上げられる

知り合いのバンドの練習を冷やかしに行ったら

叩いた事もないのにいきなりドラムにスカウトされる

翌日には会社の近くのヤマハドラム教室に通う

高校では

少林寺拳法で全国大会に出場

およそ女子らしくない高校生活を送る

社会人となりインターネットに出会うまだまだネット界隈は成長期であったため、その煩雑すぎるホームページ群を見て「これってデザイン勉強すれば活躍できる場所たくさんあるかも…」と直感し、

デザインを学ぶため働きながら武蔵野美術大学の通信教育過程を受講する

デザイン会社に事務兼雑用係りとして潜入

DTPデザインが楽しすぎてWEB デザインをやろうとしていたことなど一切忘れる

清水 奈美趣味：好きなおつまみを作って　　　こころおきなくお酒を飲むこと。

特技：少林寺拳法 2 段　　　ドラム

使用環境：

2000 年からDTP 業界に足を踏み入れ、以来 15 年以上広告デザインに携わっています。結婚、出産を経て、2011 年からフリーランスとしてデザイン業に従事。紙媒体のデザインからWEB デザイン、コピーライティングに至るまで、広告に関するあらゆるご相談に乗ることのできるデザイナーを目指して日々奮闘中！！

結婚後、ようやくWEB 業界に飛び込むべく就職活動をしとある会社のWEB マスターの職に決まった直後

妊娠が判明やむを得ず辞退する事に…

子育てをしながらもやはり自分には広告デザインの仕事しか出来ないという思いに駆られて

フリーランスでのデザイン業をスタート

40歳を目前にして、やっぱりもう一度だけ

WEBデザインにも挑戦してみたい！と一念発起し、東京クリエイターWebクリエイター養成科を受講

結婚披露宴で

妊娠６ヶ月の身重の体で

ドラムを披露し

友人達を大いに心配させる

娘が誕生

娘に読み聞かせ

するうちに

絵本が大好きに。

読み聞かせボランティア

にも積極的に参加。

PROFILE

Mac OS10.9.5、Illustrator CS6、Photoshop CS6、Dream Weaver CS6、InDesign CS6、MorisawaPassport

わたしとデザインのあゆみ

■ダイレクトメール

■お得意様に向けた企画展の告知

■ギャラリー はるり銀花 様

■1 通につき2 時間程度

■紙面デザイン

■B3 チラシ

■新聞の折込広告

■広告代理店様

■B3 サイズ片面で 1日～2日

■紙面デザイン

はるり銀花は川越にあるギャラリー。

毎月、作家を変えて季節感のある企画展を

行っています。お店のお得意様に向けて

毎回季節のおたよりをおくるような気持ちで

企画展のご案内を作成して

お店とお店を愛して下さるお客様をつなぐ

お手伝いをしています。

折込広告は、私が DTP オペレーターとして

働きはじめた頃から 15 年近く携わっている媒体です。

単なる見栄えを超えたところに求められているものは

あると考えています。

クライアントにとってはどれも外せない大事な情報

だからこそ、一目見て多量の情報が即座に伝わる

デザインを心がけています。

＊代理店経由のお仕事ですので WEB の公開が出来ません。

　ご興味をお持ちの方はサンプルを送らせて頂きます。

Direct Mail Design Flyer Design

Sorry!!Not be published

Point!

使用する色は、作品に使われているどれか1色を基調に少しトーンを落とした穏やかな色合いで組み立てています。必要に応じてイラストを作成する事も。

Point!

まずは、メインの商品の位置を充分にとってから、他の商品の数だけレイアウトの箱を作っていきます。紙面のメリハリを付ける事で優先順位が一目でわかる広告作りをしています。

Ai Ps Ai Ps

■Act On TV てぬぐい

■自社 PR のための　オリジナルグッズ制作

■Act On TV 様

■企画、デザイン

CS 放送チャンネル「Act On TV」のチャンネル名称変更

に伴うプロモーションの為に制作しました。

主にイベントなどで、アンケートのお礼に使用したり、

営業先への挨拶周りの手土産にも重宝されました。

実用性があるもので、使用している人が

「これ何？」と聞かれる事を狙って、“てぬぐい”

という形をとりましたが社内外でも大好評でした。

Direction & Copy Writing Novelty item Design

■A4 チラシ

■CATVガイド誌入れ広告

■Act On TV 様

■紙面企画、構成、　コピーライト、制作ディレクション

全国の CATV 局 200 局で放送されていた CS チャンネル

のプロモーション担当時代に作っていたチラシです。

社内で作成されていた WEB サイト、メルマガ、そして

紙媒体の雑誌への広告のコピーライトも全て担当。

番組ディレクターひとりひとりから、新番組の情報を

細かくヒアリングして、視聴者の興味を引きそうな言葉

を引き出すように心がけていました。

Point!

ターゲットがニッチな情報を求めている富裕層だった為、チープな印象を与えないように言葉の選び方には気を使っていました。

Point!

　品質にもこだわり、複数の業者の方と会い、何度もサンプルなどを見比べて選んだ“染料プリント”という技法で印刷されたてぬぐいです。裏側もきれいに模様が出る　ようになっています。

Ai Ai

■WEBフォーム最適化システム　のロゴタイプデザイン

■JDネット様

■3日

■デザイン

WEB フォーム入力を自動で最適化するシステム

である「フォームオプティマイザー」のロゴです。

入力フォームによく使われるチェックボックスを

シンボルにして作成しました。

トレンドのフラットデザインのものと、

グラデーションをつけた立体感のあるものと２通り

ご提案し、フラットデザインの方をご採用頂きました。

使用箇所に応じて使い易いように、５種類のパターン

をご用意しました。

Name Card Design Variation Logotype Design

■名刺デザインパターン

■東京クリエイターでの課題

■5 パターンで 3 時間

■ロゴのブラッシュアップ　および紙面デザイン

課題用に支給された架空のカフェのロゴを

ブラッシュアップしてカフェカラーに

変更したり、コーヒーのモチーフを入れたりして

よりカフェ感を出してみました。

名刺は、シンプルだけれどカフェカラーで

ロゴの雰囲気との統一感を出しています。

Point!

ロゴはフラットデザインを意識して、シンプルだけれどモチーフをワンポイント入れることで印象に残るようなデザインに仕上げました。

Point!

こちらのロゴも、トレンドを抑えたフラットデザインで提案してみました。この他にも全く別の案を2案の計3案を複数種類のカラーパターンで提案しています。

Ai Ai

■ランディングページの　メインビジュアル

■東京クリエイターでの課題

■2 パターンで 3日間

■メインビジュアルのデザイン

■ポートフォリオサイト

■東京クリエイターでの課題

■6日

■サイトのテキストライティング　およびデザイン

架空の旅行会社 JYBのゴールデンウイーク用

ランディングページのメインビジュアルを

2パターン作成しました。

A案は、若年層向けにお得感を打ち出したデザインに、

B案は、やや年配の富裕層向けにラグジュアリーな

印象のコピーやデザインに仕上げました。

自分の経歴をまとめて簡単なポートフォリオサイトを

作成しました。

フレームワークの Bootstrapを使用して、作業を簡略化

しています。また、Bootstrapを使うことで簡単に

レスポンシブ対応しています。

また FontAwesomeや WEBフォントである“Noto Sans ”

を使用するなど、実験的な試みで作成したものです。

Landing Page Main Visual Portfolio Site Design

A 案

B 案

Point!

どちらも「コの字型」のレイアウト構造を意識して、最後に直接的なアクションにつながる電話番号を目立つ色で配置してあります。

Point!

　タイトルは印象に残るようなキャッチーなものをつけたいと考えましたが、少し言葉がキツく感じてしまうので、あえてヘタ感のあるフォントを使って、ハズした感じを狙って　みました。

Ps BAi Ps DwCSS

毎月の DMを作成させて頂いているはるり銀花様のサイトデザインからプロモーション施策の提案までさせて頂きました。それまでは、別のWEB制作会社にサイトの運営を任せていらっしゃったのですが、現状の問題点や改善点などを企画書にまとめてご提案しました。

現状サイトでは情報の蓄積が全くなかったので、お店 PRの為に CMS構築によるブログを設置して過去の情報を蓄積して検索に引っ掛けるという方針の他、お店の雰囲気を伝え易い写真を多く取り入れようというご提案をしました。様々な手仕事の一点ものを扱うギャラリーなので、Instagramによるハッシュタグを利用したよりダイレクトに興味のある顧客層に呼びかけるプロモーション、既にあった Facebookアカウントとの紐付けをして、サイトの TOPにウインドウを表示し、サイト更新の頻度を出来るだけ手間をかけずに増やすという SEO対策なども同時にご提案させて頂きました。

現状のドメインを引継ぎながらも、新しいサーバーに引っ越しをしなければならないので、下記の様な点に留意してサーバーを選定しました。

ご提案

■それまで使用していた独自ドメイン“www.haruri.jp” を引き継ぐことが出来るか。■動作は安定しているか。評判はどうか。　■WordPressでの構築が可能であるか。■今後の仕事でも使用する機会があるので複数アドレスを構築できるサーバーであること。■費用面での同業他社との比較。

サーバーの選定

提案書の内容に沿いながら、サイトの構造とおおまかなレイアウトを作成。作成に際しては、一番使い慣れたソフトである Illustratorを使用しました。RGBモードで作成すれば、WEBカラー設計も簡単に作ることが出来るし、カラムのバランスなども容易に比較検討できるので自分的にはこの方法はとても合っていると感じました。

ワイヤーフレーム作成

サイトリニューアルの概要

最大20個までサイト構築可能で、CMSの簡単インストール、手頃な価格から始められる“さくらサーバー” に決定。結果

※提案書 .pptの一部抜粋

■店舗 PR サイト作成

■はるり銀花 様

■2ヵ月

■プロモーション企画＆

　サイトデザインプロジェクト

川越にあるギャラリー“はるり銀花” 様のサイトを

全面リニューアルのプロジェクトです。

初めての本格的な WEBサイトデザインのお仕事だった

ので、勉強させてもらうつもりで、いろんな事に挑戦

させてもらいました。そして、このプロジェクトは

現在も進行形で動いて

いるものでもあります。

Shop Site Design Project

AiP Ps DwCSS

jQuery Wwww.haruri.jp作成したのはこのサイト⬇

Outline Macbook Pro Device

web elements

Free Resource

Point!

WEBの勉強を本格的に始めてから、まだ3ヵ月というところですが、企画立案から事務手続きも含めて一つのプロジェクトを自分1人で進める事が出来ました。

ワイヤーフレームを印刷して設計書とし、それを元にHTML＆CSSによるデザインを構築しました。店舗の PRサイトなので、スマートフォン、PC両方見られる事を重視して、リキッドデザインによるレスポンシブサイトとしました。jQueryなども使用して、なるべく手間をかけずにスマートフォン用メニューなどにも対応させました。写真を多く取り入れたかったので、これも jQueryのプラグインを使用して TOPページと店舗案内、姉妹店の店舗案内のページにスライドを設置しました。写真以外の部分は、なるべく画像を使用しない事で後の修正作業を簡易化するよう心がけ、しかし、チープにならず美しくレイアウト出来るように注力しました。

HTML＆CSSによるデザイン

それまで制作運営管理していたWEB運営会社に直接連絡を取り、独自ドメイン移管の段取りをしました。先方にやって頂く事とこちらでやらなければいけないことを、新サーバーの移管マニュアルなどを熟読しながら行い、何とかトラブルもなくスムーズに移管する事が出来ました。

独自ドメインの移管

店舗の写真撮影も自分で行っています。ちなみに、写真撮影は20代の頃からの趣味でもあります。使用機：OLYMPUS PEN E-PL1S（ミラーレス一眼）

写真撮影

今回は、元からあるWordPressのテーマを使用せずに、自分のデザインしたHTML、CSSファイルを元に phpを書き加えて、テーマを作成する事にしました。現在鋭意構築中です。

WordPressテーマ化

Google Search Consoleと Google analyticsに登録を行いました。検索されているキーワードや、ユーザーの流れ、よく見られているページなど、これから運用していく中でここで得た解析結果をお店の方に定期的にフィードバックして、さらに効率の良い集客を探っていきたいと思います。

Google サーチコンソールとGoogle アナリティクスへの登録・分析

毎月のDMやショップカード、店長の名刺にQRコードを入れサイトと紙媒体を連動させました。今後特設ページなどを設けて、どの程度紙媒体からサイトへ人の流れがあるかなどもgoogleアナリティクスなどを用いて計測していくつもりです。

DM、名刺との連動

WEBのお仕事は、今まで私のやってきた紙媒体とは少し違って、出来上がってから本番です。お客様と共にサイトを育てていくという歓びを感じながら引き続きサイト運営を続けて行きたいと思います。また、姉妹店のサイト作成や、外国人観光客の多い川越にお店があるので英語のサイトもこれから構築して行く予定です。

■今後の展開

namihey.x0.com

Thanksfor reading

untilthe end.