ご相談・お問い合わせ

055-2XX-XXXX

  • HOME
  • >
  • デザイン作業

デザイン作業

まず、ホームページ制作においてベースとなるのが「デザイン作業」です。

ワイヤーフレームなどによる設計図を元にデザインを作成。

そのデザインを元に実際にサイトが表示されるように「コーディング」をおこなっていきます。

そのため、デザインの変更はコーディング作業にも影響を与えるため、打合せはとても念入りにおこないます。

しかも、ホームページのデザインはクライアント様によっていろいろな内容のオーダーがあります。

ここではデザイン作業内容としてどのようなものがあるのか説明していきたいと思いますのでご確認ください。

ホームページのデザイン作業内容

【各ページのデザイン】 【ページ内のパーツごとのデザイン】
  • トップページのデザイン
  • トップページ&サブページ(下層ページ)のデザイン
  • スマホサイズ&タブレットサイズのデザイン
  • 各種レイアウトごとのデザイン(1カラム・2カラム・3カラム)
  • 写真や画像などご提供素材の配置
  • サイトのロゴデザイン
  • トップ画像(ヒーローヘッダー)のデザイン
  • バナーのデザイン(各種サイズ)
  • クリックボタンのデザイン
  • 見出しの装飾デザイン
  • 背景やコンテンツ周りの装飾デザイン

各ページのデザイン

1.デザインの打合せ

クライアント様と打ち合わせをおこないページデザインの作業を進めていきます。

専用フォームやメールなどでデザインのイメージをお伺いします。

各コンテンツの配置を決めるレイアウト、サイドバーの有無を決めるカラム数、色合いの基本となるイメージカラー、高級感・清潔感・かわいらしさといった印象面など、様々な情報を細かく確認いたします。

>> デザイン依頼フォームのサンプルはこちら

2.デザインイメージ情報のやり取り

ホームページをどのようなデザインにしたいのか、イメージを伝えるのは難しい部分があります。

そこで、一般的にはワイヤーフレームというページのレイアウトを定めた設計図を送りデザインイメージを伝えます。

ワイヤーフレームがあると、より一層イメージが伝わりやすくなりますので可能であれば準備をするようにしましょう。

ワイヤーフレームはEXCELやWORDで作られてもいいですし、面倒な場合は手書きのラフでも構いません。

>> ワイヤーフレームのサンプルはこちら

3,写真素材の確認

ホームページの中に配置する写真や画像などの素材は、基本的にはクライアント様からご提供いただく形となっております。

クライアント佐賀の方で撮影された写真やロゴなどをご提供いただきますとスムーズにデザイン作業が進められます。

そのいただいた素材を加工・修正しながらイメージ通りのデザインとなるようにレイアウト・配置作業をいたします。

もし、お手元に素材がない場合にはAbobeStockやPIXTAなどの有料素材をご購入いただくことをお勧めいたします。

当オフィスにて素材を探すこともできますが、その場合はカンプ画像(見本)を掲載してご提示させていただきますので、後日ご購入の上あらためてご提供願います。

最終的に完成したデータはjpgやpngなどの画像ファイルにてお渡しさせていただきます。

なお、イラストレーターやフォトショップによるファイルでのお渡しも可能ですので、必要であれば合わせてお申し付けください。

ページ内のパーツごとのデザイン

1,サイトのロゴデザイン制作

ロゴデザインは会社やお店の印象を左右するとても重要なパーツですので印象的なロゴの制作もぜひお任せください。

当オフィスでは、そのロゴデザインの制作をホームページとセットでの制作もお受けしております。
(もちろんロゴ単品のセパレート発注も可)

ロゴをホームページとセットでお申し込みの場合は割引価格で制作させていただきます。

詳しくは価格表のページでご確認ください。

>> 価格表のページはこちら

なお、すでにロゴデザインをお持ちの場合は、素材のデータファイルをご提供ください。

そのままホームページ作成時に使用させていただきます。

2,トップ画像(ヒーローヘッダー)デザイン

サイトを表示したときに最初に目に飛び込んでくるのがトップ画像です。

画面幅をいっぱいに使った大きなトップ画像がよく使われますし、何枚もの画像をスライドで見せるオートスライダーも主流となっています。

特に最近では動画を使用した動きのあるトップ画像もよく目にするようになりました。

当オフィスでも最新鋭の技術を取り入れた目を引くヒーローヘッダーを作成しております。

デモサイトで色々なデザインのトップ画像(ヒーローヘッダー)をご確認ください。

>> デモサイト一覧はこちら

 

▼ 動画を使用したヒーローヘッダーのイメージサンプル ▼

 

 

3,バナーデザイン

バナーとはリンク先へ誘導するための画像のことですが、サイト内においては非常に重要な役割を持っています。

商品一覧ページや求人募集ページなどへ誘導する際に、テキストではなく画像を使用することで視覚に訴えることができるためクリックされやすくなります。

また、ユーザービリティを意識したサイトにする上でもバナーは必須アイテムと言えるでしょう。

当オフィスでは、ユーザービリティを意識したUI/UXデザインの作成を心がけています。

サイト内のリンクバナーから商標用の広告バナーまで幅広く扱っています。

2,クリックボタン・見出しの装飾デザイン

サイトデザインの印象に影響を与えるパーツとしてクリックボタンや記事の見出しがあります。

詳細ページなどへ誘導するクリックボタンは、サイト全体のデザインと調和させることも重要ですが同時に目立たせることも重要です。

また記事の見出しも同様で、しっかりと認識させながらもサイトの雰囲気にマッチさせるように作ることが重要です。

クリックボタンや見出し装飾のデザイン費用はホームページの制作成費に含まれます。

ページデザインの打合せの際に各パーツのデザインも一緒にご確認ください。

なお、各パーツのデザインはサンプル一覧のページでもご覧いただけますので、色々なデザインを参考にしてみてください。

>> 各パーツのサンプル一覧ページはこちら

 

3,コンテンツ周りの装飾デザイン

サイトには上記のようなパーツ以外にもコンテンツ周りに細かなデザインパーツがあります。

たとえば背景画像、ナビゲーションメニュー、サイドバーメニュー、アクセスマップ、SNSのロゴマークなどです。

比較的デザイナーがサイト全体のイメージに合わせてデザインするケースが多いのですが、クライアント様によってはこだわりがあり、パーツごとに細部に渡ってご指示をいただく場合もございます。

デザイナーにすべてお任せの場合でも、クライアント様こだわりのデザインでも、綿密に打合せをしながらご納得の行くデザインを制作いたします。

制作の前にも無料でご相談をお受けしておりますので、ぜひ一度お問い合わせください。