大切にしている考え方
「答えはお客様が知っている」— 私が大切にしている考え方です。
だから、私のお客様であるクライアントの想い、そして店舗やサービスを利用されるお客様の気持ち、その両方にしっかり寄り添って考えます。
そして、両者の想いが交わる部分を見つけ、デザインで形にします。それが「想いに応えるホームページ」です。
見た目のデザインはもちろん大切ですが、伝えることを整理する「情報の設計」も大切にしています。そうすれば、見ている方の心に響くホームページ、効果が出るサイトの制作につながるからです。
ヒアリングでは、たくさんの想いを聞かせてください。作る人、伝える人、見る人。全員が幸せになれるホームページを、一緒に考えましょう。
提供するサービス
88,000円〜
納期の目安：6週間〜8週間
トップページと複数の下層ページからなる「Webサイト」を作ります。事業やサービスの紹介、ブランディング、情報提供が主な目的となるページです。もちろん、パソコンとスマホのどちらで見てもきちんと見える「レスポンシブ対応」です。スマホでアクセスするお客さまが多い世の中ですから、「モバイルファースト」で設計します。※制作工程のうちデザインのみ、コーディングのみのご依頼も承っております。
55,000円〜
納期の目安：3週間〜4週間
ランディングページ（LP）は商品やサービスの購入、利用者登録など、はっきりした目的があるページです。お客さまが他のページに移動してしまわないよう、縦に長い1ページで作ります。スムーズに読み進められるようにストーリーを展開し、購入や利用者登録など、目的のアクションに至る流れをきちんと設計します。※制作工程のうちデザインのみ、コーディングのみのご依頼も承っております。
3,300円〜
納期の目安：1週間
ブランドイメージを形づくるロゴや、ページの構成要素として大切なバナー画像のご依頼も、承っております。ブランドやサイトのイメージに合わせてお作りします。ロゴはWebページだけでなく、名刺や封筒など、さまざまなシーンにもお使いいただけるよう、印刷にも対応した形式で作成します。
制作例
遷移先のECサイトは、ネイビーを基調としたシンプルなサイトです。ボタンクリックから遷移したとき、LPとECサイトのギャップが大きいと、離脱の原因になります。そこで、あしらい等のデザイン要素は控えめに、ボタンもECサイトに合わせて、シンプルに仕上げました。
既存サイトで使用されているネイビーとオレンジを、より映えて明るめのネイビーと、秋らしいオレンジに調整して、LPの配色に使用。
商品やボタンが並ぶことが多く、単調になりがちなので、2色を交互に配置することによってリズムを生み出し、見る人を飽きさせないように工夫しました。
デザインカンプ通りでは、スマホの表示領域を有効に使えないため、画面幅いっぱいに使うレイアウトを、実機で確認できるコーディングベースで提案。視認性と可読性を改善しました。
PC版とスマホ版ヘッダーのデザインカンプから、3段階のレスポンシブに対応。CTAボタンにはご希望のアニメーションを実装しました。
Page Speed Insightsでスマホ版64→85点、PC版85→90点と高速化を行い、ストレスなく表示されるLPを実現しました。
デザインコンテスト応募作品です。
メインビジュアルには、黄金比の螺旋上に宇宙飛行士を配置。宇宙の広がりとともに、過去から未来への時間の経過と、宇宙を体験した人間の変化を表現しました。
SF映画に出てくる宇宙船や宇宙ステーションの扉をイメージした、六角形のモチーフをページ全体に使用。画像もスクエアではなく、六角形に合う形で配置しています。次なる扉を開ける応募者の、興味を掻き立てるデザインを意識しました。
メインビジュアルは「自宅にいながら、留学のような英語のコーチング」が受けられることを、前面にアピール。
ピンクをベースにグリーンも取り入れ、明るい雰囲気に。イラストやストライプ柄を散りばめることによって、可愛さや親近感を演出。
ライティングでは「今のあなたに必要」だと感じられる見出しを多く追加。講師からのメッセージは「あなたに届ける」手紙をイメージして、閲覧者の心に響くように工夫しました。
配色に黒を希望していたが、①ベースカラーに黒を使用した高級なイメージと、②コーラルベージュをベースにした女性らしい配色の、2パターンを提示。前者だと他のジムのイメージと近くなり、「某サービスみたいに厳しくないので〜」というお客様の声も考慮して、差別化が図れる後者を採用。
高級感を損なわないよう、明朝系のフォントをベースに使用。女性らしいカラーの中にも、健康やパワーを感じられるように、デザインしました。
リニューアルドリンクの告知バナーです。Instagramにもそのまま投稿できるよう、縦横比1:1のスクエアで作成。
新ドリンクが2種類あることがわかりやすいよう、左右２分割の構図にし、ドリンクの味を視覚的にイメージできる配色にしました。
飲むか飲まないかではなく、「どちらを飲むか」という意識を想起させるよう、キャッチコピーを工夫。また、SNSで拡散されやすいように、ハッシュタグに続く短い言葉にしています。
コロナ禍でも自宅で夏期講習を受けられることをアピール。
メインビジュアルは自宅でパソコンに向かう学生の写真を選びました。屋内の写真そのままでは閉塞感が出てしまうため、明るいブルーとイエローを下地に引き、明るさと開放感をキープ。
アクセントカラーのイエローとブラックを使い、オファー内容の入会金¥0と指導2回¥0を目立たせました。左上にはイエローのラインを電波に見立て、オンラインを想起させるデザインにしています。
Twitterで告知することを想定し、投稿画像サイズ1200x675pxで作成しました。
セミナー告知バナーはブルー系が多いですが ①女性でもう少し柔らかい雰囲気にしたい ②アフターコロナなので健康的なイメージを出したい、これらを想定して背景はグリーンにしました。
背景はグラデーションのように、明るさの異なるグリーンを配色し、明るい部分にいる女性にスポットライトが当たるよう、デザインしています。
制作の流れ
どのようなサイトにするか、仕事への考えや想いも含めてお聞かせください。サイトに掲載する文言等でお悩みの場合は、ヒアリングの際に一緒に考え、ブラッシュアップすることも可能です。都内および近郊であれば、オンラインでなく対面でのヒアリングも承っておりますので、どうぞご相談ください。
ヒアリング内容をもとにお見積もりします。お支払いに関しては、基本的に前払いをお願いしております。ただし、Webサイト制作またはランディングページ（LP）制作では、金額が大きくなる場合もあるため、着手金のみのお支払いも可能です。お気軽にご相談ください。
ヒアリングで決まった内容をもとに、デザイン案を作成します。デザイン案は5回まで修正可能です。5回というのは、通常のサイト制作では十分に多い回数です。これ以上多くなると逆に方向性が定まらなくなり、デザインもサイトのクオリティも低下するため、回数を制限させていただいております。
決まったデザインをもとに、実際にホームページとして見える形を作り上げ、マウスの移動やスクロールに応じた動きを付けます。WordPressというツールを使用して、サイトを構築します。
残金がある場合は、納品前にお支払いください。納品作業を行い、構築したサイトを実際のホームページのアドレスでご覧いただけるようにします。また、今後の保守・運用についてもご案内します。ご自分で保守・運用するのが難しいと感じた場合は、ご依頼も承っております。※運用・保守はサイト制作とは別料金になります。
よくあるご質問
使用ツール・スキル
写真等の加工を行います。被写体の切り抜き、明るさや色味、コントラストの調整、複数の写真の合成、映り込んでしまった余計な被写体の除去などを行います。ご希望の場合は、通常XDで行っているデザインデータの作成をPhotoshopで行います。
ロゴの作成やイラスト、バナーのデザインを行います。またWebで使用する、装飾を施した見出し用画像データの作成もIllustratorで行います。
ワイヤーフレームと呼ばれる概要図の作成と、デザインデータの作成を行います。デザインが終了しサイト構築に入る前に、プロトタイプのデザインデータをお手持ちのパソコンやスマホで確認していただくことができます。
実際にブラウザで見ることができる、サイトの構築を行います。WordPressで構築されたサイトは、簡単な変更であればプログラミングが不要なため、ご自身で画像の差し替えや、記事の追加も可能です。複雑な変更につきましては、別途ご依頼ください。
プロフィール
想いデザインオフィス
代表 ／ Webデザイナー
Masataka Suzuki
慶應義塾大学・大学院にてITの基礎を学ぶ。
十数年のSE時代には、中央省庁や飛行機の予約システムなどで、ヒアリング・要件定義から設計・実装・テストまで実施。
過労から長期闘病生活に。闘病中は飲食業・小売業で接客を行う。お客さまに寄り添う、穏やかで丁寧な接客で好評価を頂く。
仕事と病気の両立を目指してWebの世界へ。プロのデザイナーに師事し、Webデザイナーとして開業。現在に至る。
無料でご相談・お見積もり