カテゴリー: WEBデザイン

  • 株式会社ビィウェル様ホームページ

    株式会社ビィウェル様ホームページ

    株式会社ビィウェル様ホームページ

    株式会社ビィウェル様ホームページ

    【概要】

    株式会社ビィウェル様からのご依頼で制作したウェブサイトです。

    https://bewell-corp.com/

    既存のサイト全体のリニューアルをお任せいただきました。

    総ページ数:14ページ

    使用ツール:
    WordPress、Photoshop

    製作期間:2ヵ月

    【こだわりポイント】

    スマホで閲覧されるお客様が多いサイトのため、見やすさや使いやすさにこだわりました。
    ・スマホではメニューやお申込みボタンはすぐに使えるよう上部に固定。
    ・「お客様の声」など文章のボリュームが大きいセクションはスクロールボックスに収めて読みやすくしました。

    ・白をベースに、会社のロゴのライトブルーをメインカラーにして、清潔感・信頼感のある雰囲気を目指しました。
    本案件は既存のサイトのリニューアルでしたが、出張型のペーパードライバースクールという業態からサイトからの集客が重要なため、クライアント様とヒアリングや打ち合わせを重ねて制作しました。

    ①クライアント様の会社の強みや他社との差別化のポイントを聴取

    ②既存サイトの内容の整理・改善
    ・強みが伝わりやすいよう既存サイトのテキストを整理
    ・受講のシステム等コーナーを新設して分かりやすく提示

    ③CTA改善のための施策
    ・お問合せ・お申込みボタンをPCとスマホとで出し分け
    ・お試しコースや「お客様の声」などのバナーを設置
    ・サイト内の関連記事の相互リンクを密に作成

    サイトの完成・納品後も保守管理をお任せいただき、お客様の反応などを伺いながら改善をしています。

  • カフェサイト

    カフェサイト

    カフェサイト

    【概要】

    コーディングの練習で作ったサイトです。

    https://cafe.tanakaz-design.com/

    森の中にある居心地のよいカフェというコンセプトを大切に、明るく温かみのある雰囲気になるよう心がけました。
    このカフェを知ってもらい、来店につなげるのが目的なので、店内の写真は大きなサイズで配置し雰囲気が伝わるようにしました。

    さらに、各ページの下部にアクセス方法や地図を掲載しています。
    また、お店のイメージに合うように、背景色やタイトルの文字、写真の枠などに森林を思わせるグリーンやブラウンを使用しています。

    使用ツール:

    HTML、CSS、Photoshop

    製作期間:3週間程度

    【こだわりポイント】

    ・メニューの写真は美味しそうに見えるように明るさや彩度をそれぞれ調整しました。
    ・また、統一感が出るように飲み物のカップの大きさも写真のサイズ調整でそろえています。
    架空のお店に命をふきこむ

    自分のよく行く場所にこんなお店があったらよいな、と思ってサイトのテーマを決めました。
    もちろん、架空のお店ですが、自分がその店のお客さんとしてどんな情報があったら良いか、またお店のオーナーだったらどのようなことを知ってほしいかを考えて、ページの構成や内容、写真を選びました。

    一人何役物疑似体験ですが、実際のサイトを制作でも、クライアント様やそのサイトを見るお客様のの思いを想像して作ることが大切だと思います。

  • 株式会社KRM様 ピラティス集客用バナー2

    株式会社KRM様 ピラティス集客用バナー2

    株式会社KRM様 ピラティス集客用バナー2

  • 株式会社KRM様 ピラティス集客用バナー

    株式会社KRM様 ピラティス集客用バナー

    株式会社KRM様 ピラティス集客用バナー

  • 株式会社マイウェブ様 化粧水バナー

    株式会社マイウェブ様 化粧水バナー

    株式会社マイウェブ様 化粧水バナー

    株式会社マイウェブ様のご依頼で制作しました。クライアント様のご要望は、「シンプルだが説得力のあるデザイン」とのことでした。
    背景はホワイト系ですっきりさせ、ゴシック体の大きな文字でキャッチコピーを入れることで化粧水の効果をアピールしています。
    オーガニック化粧水であることが分かりやすいように背景に植物を配置し、文字をブラウン系でまとめています。

    使用ツール:Photoshop

    製作期間:5日(制作~修正~納品まで)
    ・見た人が化粧水の効果を想像しやすいように、美しい肌で自信のある表情の女性の写真を選びました。
    ・商品名が長いので、自然な視線の流れで読みやすい位置・大きさに配置しています。
    「オーガニック化粧水」らしさの表現
    「オーガニック化粧水」のイメージに合うような色や写真の選定に気を使いました。色が多くなりすぎないように、文字も大きく配置したいので植物の写真は小さいスペースでもしっかりみえるように…と。その試行錯誤も、大切な制作過程なのだと思います。

  • 株式会社マイウェブ様 カウンセリング系バナー

    株式会社マイウェブ様 カウンセリング系バナー

    株式会社マイウェブ様 カウンセリング系バナー

    カウンセリング系バナー
    会社マイウェブ様からのご依頼で制作した、カウンセリング系のZOOM勉強会についてのバナーです。
    カウンセリングコーチのお客様のより、「信頼感、安心感のあるイメージで」とのご希望でした。
    「信頼感、安心感」ということから、ベースカラーにはグリーンを選択しました。そして「生きづらさ」という重いテーマの学習会に「脱出作戦」というキャッチーなワードが使われていたので、堅苦しくないかたちで、見た人に「悩みを決できそう」と思ってもらえるようなデザインがよいと考え、制作しました。

    使用ツール:Photoshop

    製作期間:4日(制作~修正~納品まで)
    ・「脱出」というイメージが一目で伝わるように、「非常口」のピクトグラムを使いました。見た人に安心感を与えられるように、色合いは通常のものより明るくソフトにしています。
    ・全体のフォントを太めのゴシックでまとめ、信頼感のある印象にしています。
    ・公式サイト内に設置予定のものだったので、主催者名は自明として入れずにタイトルを大きくして目立たせています。
    重いテーマでもユーモアを添えて

    ターゲットは20~60代の男女とのことでしたが、その中でも人間関係のお悩みをお持ちでそこから抜け出したいと思っている方々と想定しました。
    また、この勉強会が「生きづらさ」という重めのテーマでありつつ、タイトルに「脱出作戦」というキャッチーなワードを選んでいることから、それらのお悩みを前向きに解決していきましょう!というメッセージが込められていると感じました。
    そこで、ちょっとユーモアの要素も入れようと思い、誰もが知っている非常口のピクトグラムをお借りしようというアイデアが生まれました。
  • meta様 フランチャイズ募集バナー

    meta様 フランチャイズ募集バナー

    meta様 フランチャイズ募集バナー

  • 株式会社TYL様 求人サイト用バナー

    株式会社TYL様 求人サイト用バナー

    株式会社TYL様 求人サイト用バナー

    求人バナー01
    求人バナー02
    求人バナー03

    【概要】

    株式会社TYL様より、自社で運営する求人サイト内のカルーセル広告に使用するバナーのご依頼を受けて制作しました。

    クライアント様より、「今回は精肉のイメージだけで、ターゲットは20~40代の男女と広めに」とのご要望を受け、シンプルで親しみやすいデザインを目指しました。

    使用ツール:Photoshop

    製作期間:5日(制作~修正~納品まで)

    【こだわりポイント】

    ・カルーセル広告で内容も関連のあるものなので、カラーやデザイン・ボタンなどの統一感を出しています。

    ・精肉のイメージに合うようにカラーは赤系とイエロー系でまとめました。

    ・サイトを見た求職者の方に求人の内容に期待をもってもらえるように、各バナーに笑顔や自信のある社員のイメージ画像を入れています。

    ・また、求人のメリットが伝わりやすいように、緑色の枠に統一して目をひきやすくしています。
    ・精肉工場について元々の知識がなく、何をする工場なのかなどを調べるところから取り組みました。

    すると、待遇面や職場環境などの一般的な求人のポイント以外にも「スキルアップ」や「商品開発」といったところも求職者の方にとって大切であることが理解でき、イメージ画像やレイアウトを考える上で参考になりました。

    クライアント様の事業内容をできるだけ深く理解してそれに合ったデザインをすることで喜んでいただける仕事ができると実感した案件です。
  • 株式会社マイウェブ様 転職エージェントバナー

    株式会社マイウェブ様 転職エージェントバナー

    株式会社マイウェブ様 転職エージェントバナー

    転職エージェントバナー
    株式会社マイウェブ様よりご依頼いただいた、キャリアコミュニケーションズ株式会社様のバナーです。
    Yahoo!のポータルサイトに設置予定で、「派手さはないが主張が伝わるデザイン」とのご要望だったので、まずはサービスの特徴がはっきり伝わることを、デザインの中心において制作しました。
    まず、情報量の多いポータルサイトでも目にとめてもらえるように、サービスの特徴の文字サイズはできるだけ文字を大きくしました。
    さらにベースカラーには信頼感を表す青色を使い、キーワードである「伴走型」はベースカラーの青の反対色であるオレンジ色にして目立たせています。

    このオレンジ色を使うことで、バナー全体の色味もはっきりしたものになりました。

    使用ツール:Photoshop

    製作期間:3日(制作~修正~納品まで)
    ・装飾は控えめにして堅実さを出しつつ、ゴールドのラインを入れることでサービスの質の高さを表現しました。
    ・実績は文字数が多く字が小さくなるため背景に赤い円を置き、数値を大きく入れることで目に入りやすくしました。
  • 会社マイウェブ様 キャットフードのバナー

    会社マイウェブ様 キャットフードのバナー

    会社マイウェブ様 キャットフードのバナー

    キャットフードのバナー
    ・前足をあげた猫のポーズは、このキャットフードがお気に入りにみえるように選びました。
    ・背景のオレンジ色が濃く画面が暗くなりやすいので、黄色の線を加えて明るさをたしています。
    ・商品の特徴を表すテキストは、ポップ体にして元気の良さを表現しました。