Nursing Care

Corporate website

URL : https://with-shiny.com/

作品概要

名古屋市にある介護事業会社様のコーポレートサイトのリニューアルデザイン制作を行いました。 現場課題の多い福祉の仕事を明るくするという経営者の想いを表現するため、水彩画のあしらいを使用して 柔らかさを感じられるデザインにしました。

制作のポイント

意図とポイント

デザインコンセプトの「光芒」を表現するため、一筋の光が、企業理念である「福祉の”今”も明るく」を照らしていることをイメージしたメインビジュアルを作成しました。 企業カラーのオレンジと水色を使用しながら、暖かみの感じられるピンクを差し色にしたグラデーションがポイントです。また水彩画のあしらいを使用して柔らかい雰囲気を表現しました。

問題と解決策

既存のWebサイトは経営者の想いを落とし込めておらず、事業ページも簡易的なもので内容が具体的にわかりづらく、採用ページもないのでコーポレートサイトとして情報が少ないといった課題がありました。解決策として全面的に再構築し、認知度向上・採用につながるようなリニューアルサイトを制作しました。具体的には、サイトの企画段階から、事業内容の理解・他社サイトの競合調査などをマインドマップにまとめて可視化しました。

結果

お客様に直接、「私たちの事業の想いを形にしてもらって嬉しい」といったお言葉を直接いただくことができました。

• Client: with shiny .inc
• Category: Website design

Web production

Landing Page

URL : https://cans01.jp/service-guide/

作品概要

愛知県にあるWeb制作会社のLP制作を行いました。 女性が多く、お客様との親切なコミュニケーションの上で制作していくことが強みなため、ピンクなど接しやすさや柔らかさをイメージさせるカラーを使用し、 プランなどの実際の内容は、よりわかりやすいシンプルなデザインに仕上げました。

制作のポイント

意図とポイント

会社の特徴である想いが伝わるホームページ制作が伝わるよう、親切で温かさが伝わるよう制作しました。 それだけでなく、会社の強みやサービス内容の部分は離脱せず読んでもらえるようカラフル、かつシンプルで読みやすいことなどユーザビリティを重視したデザインにしました。テキストに動きをつけたり、「想いが伝わるホームページ」「マル投げOK」などキャッチコピーはメリハリをつけ、注目を引くようにしました。

問題と解決策

現在の会社のクライアント集客のためのLPサイトはなく、集客に課題がありました。そこで、キャッチコビーや導入文〜サービスの説明〜よくある説明までの基本的な構成のあるLP制作し、集客拡大を目指すこととなりました。

結果

会社の特徴である想いが伝わるホームページ制作が伝わるよう、温かみのあるデザインにしました。 また、サービス内容の部分は料金形態やオプションが伝わりやすいよう、シンプルでユーザビリティを意識したデザインにしました。

• Client: Cans inc.
• Category: Website design

Manufacturing

Corporate website

URL : https://tfs.yamazen.co.jp/

作品概要

大手製造メーカー様の支社の新規コーポレートサイトを制作いたしました。できるだけシンプル 且つ堅い印象を持たせないように、それでいて誠実さが伝わるように制作いたしました。先進的な雰囲気のデザインにて制作させて頂きました。

制作のポイント

意図とポイント

「山善TFS（トータル・ファクトリー・ソリューション）支社」の認知向上のための新規コーポレートサイトを、ワイヤーフレームの企画からビジュアルデザイン制作までリードデザイナーとして携わりました。既存の本社のコーポレートサイトから大きくイメージがずれることのないように制作しました。

問題と解決策

設定としたターゲットは、食品や部品加工などの製造工場や、工場や倉庫における物流業務などでの人手不足問題に困っている企業です。サイトのデザイン性よりも、コンテンツが充実がしていることや、役立つ情報が届けられることを優先してほしいとのクライアント企業からのご要望がありました。そこで、サイトの中にはロゴやコーポレートサイトに使用されている色や、一部のレイアウトなどを踏襲させていただききました。また、本社とは違う形で「TFS支社」という会社名を前面に押し出したキービジュアルを作成いたしました。

結果

クライアント様には「企業のイメージから大きく逸れることなく、親しみやすく興味のそそるサイトだと気に入ってもらうことができました。

• Client: Yamazen.inc
• Category: Website design

Coffee Shop

Banner

作品概要

老舗コーヒメーカーのECサイトのTOPページに設置するバナーを制作いたしました。

制作のポイント

意図とポイント

バレンタイン用キャンペーンとして、コーポレートカラーの赤をベースに特別なギフト感のある雰囲気に仕上げました。Fontは「Garamond」を使用することで、高級感がありつつも洗練されたデザインに見えるよう仕上げました。

問題と解決策

キャンペーンページへの流入を目的とするため、バナーをクリックすると、特設ページに遷移するようになっています。バレンタイン用であることと、高級感を演出するため、深めの赤と、背景の柄もダマクス柄にして工夫しました。

結果

去年より多くの流入を得ることができ高評価をいただきました。

• Client: Coffee Shop
• Category: Banner

Silk Maker

Banner

作品概要

シルク専門メーカーのECサイト内TOPページに設置する、商品のバナーを制作しました。

制作のポイント

意図とポイント

シルク専門メーカーのベーシック商品のトップバナーのため、商品の雰囲気に合うよう女性らしいくすみピンクをベースに、シンプルに仕上げました。

• Client: Silk Maker
• Category: Banner

Online shopblog

Eye-catch

作品概要

就労移行支援所で運営しているオンラインショップブログのアイキャッチを制作しました。

▼「こしょこしょかわさき」で商品紹介用のアイキャッチ

ブログの内容が旅情ミステリー「内田康夫」の本を特集する内容でしたので、風情のあるミステリー感のある画像をPhotoshopの生成塗りつぶしで背景にして制作しました。

▼「10月のあいさつ」用のアイキャッチ

季節の挨拶として投稿する10月の雰囲気をイメージしたアイキャッチを制作しました。 お月見や、秋のモチーフを使用したほか、うつくし明朝体を使用して親しみやすい和の雰囲気を出しました。 また、「あいさつ」の文字をパスでつなげることで、タイポグラフィを工夫しました。

使用ツール

Photoshop / Illustrator

• Client: Online shopblog
• Category: Eye-catch

Consulting / Sale

Banner

作品概要

通信コンサルティング等を事業とする企業様のホームページに掲載するための、各種サービスのバナーを新規で制作いたしまた。

制作のポイント

意図とポイント

それぞれのサービスの特徴を全面に出し、一目でどういったサービスであるのか、すぐ認識できるようサービス名を第一に、その次に内容を認識できるよう視線に入る優先順位を工夫して制作いたしました。

• Client: Dream Solutions inc.
• Category: Banner

Baby goods

Recruitment site

作品概要

ランディングページ制作におけるワイヤーフレームの作成からデザイン制作、コーディングまでの一連の工程までを学ぶため、Webデザインスクールのプログラムにて、架空のクライアントの制作要件に沿って、LP作成をしました。

制作のポイント

架空のクライアント：TSUTSUMU株式会社

ベビー用品をメインとし、ママの育児をサポートするコミュニティ事業や家族みんなが幸せになるフォトブック事業などを展開している。軸はベビー用品だが、今後ママ・パパ、家族向けのサービスも展開していく予定。

ターゲット

・転職希望の方 ・報酬面よりもTSUTSUMUが作っていきたい世界に強く共感してくださる方 ・各職種において全くの未経験よりは経験を重視したいが、それよりもカルチャーフィットしている人がターゲット（採用強化のためできるだけたくさんの応募がきて欲しいが、エントリーがあれば誰でもいいわけではなく、カルチャーフィットする方に応募してもらいたい）

工夫した点

曲線のイメージ画像とグラデーションのオブジェクトをジェネレーターで作成しました。オレンジと肌色のグラデーションをメインカラーとし、エントリーボタン、「もっと見る」ボタンにつけました。全体的にトンマナを意識してシンプルでまとまりのあるLPに仕上げました。また、ユーザーの動線を考えて、ターゲットに合わせた情報設計を行いました。

• Client: fictitious
• Category: Landingpage

Coworking space

Service site

作品概要

ワイヤーフレームがすでに制作されている状態から、LPのデザインカンプを制作する事を学ぶため、 Webデザインスクールにて、架空のクライアントを見立ててLP制作を行いました。

制作のポイント

架空のクライアント名：WORK.inc

架空の会員制のカフェ&コアワーキングスペースのWebサイト。女性向けのビジネススクールを展開している。会員は20代〜30代が多く、キャリアアップのためにビジネススキルを学び、さらにそのアウトプットの場として定期的にビジネスコンテストなどのイベントも開催されている。

制作目標

ワイヤーフレームがある状態からデザインカンプを作り上げる事を目指す。 PCのデザインを元にスマホに最適なレイアウトを考える。 Webデザインをするときに気を付けるべき基本的な観点を身につけて最低限のデザインクオリティを出せるようになる。

工夫した点

トンマナに合わせて写真の色味が同じになるよう工夫しました。 ACCESS部分の背景が白っぽく、文字も白いので視認性が良くなかったため、ブラウンのレイヤーを重ねること、テキストにドロップシャドウをかけることで可読性を上げました。配色について、女性向けのサイトなので、女性が好む落ち着いた茶色系の色に、アクセントカラーは向上心を意識し、又メリハリを出すために爽やかなミントグリーンを使用しました。

• Client: fictitious
• Category: Website design