Work

作品紹介

WakWak

個人でWeb事業を展開する本サイトの制作者

自身の作品を紹介するために新規サイトを制作しました。

# ##

Quick Look

担当領域

企画 デザイン コーディング

企画からサイトの公開まで全工程を一人で担当させて頂きました。

制作ツール

HTML5 Sass CSS3 Wordpress PHP jQuery JavaScript Adobe XD

制作期間 2ヶ月間(企画2weeks デザイン3weeks コーディング3weeks)
完成時期 2024年10月 リニューアル(Wordpress化)
2021年 9月 初制作
リリース

新規

リニューアル

Detail

お客様情報

事業概要・お客様情報

ホームページなどのWebサイトをメインに、チラシなどグラファックデザインも制作している。Web制作では企画からデザイン、コーディング、公開まで一貫してサポートしている。

HPを制作する背景

お客様に自分の実績(これまで制作した作品)を見ていただくため、自分が制作した作品を載せるサイトが必要となった。

理想イメージ

シンプル、スタイリッシュ、おしゃれ、清潔感・信頼感、落ち着いた配色、高品質

現状の課題

2021年にサイトを公開したが、Wordpressではないので動的でなく管理がしづらい。作品を積極的に載せたいが更新がしづらい。​
→更新のしやすいサイトにする必要がある​

ゴール

お客様が制作依頼を検討するうえで参考にできる情報を発信すること
(ネット集客は重視していない。基本的に紹介制で集客する方針。)​

施策

投稿の編集が容易によるよう実装

サイトをWordpress化し、投稿機能を利用して作品を投稿する形にした。カテゴリやタグ別もつけてユーザが見やすいように設定した。
また管理画面からすべて編集できるように設定した。例えばカスタムフィールドやブロックエディタの「パターン」などを駆使し、入力のしやすさ、抜け漏れ防止を重視して設定した。またカラーパレットのカスタマイズ、ブロックエディタへのCSSの反映も設定し、できるだけフロントと同じような見た目になるよう編集環境を整えた。

作品のコンセプト

What ユーザーがどんな問題を抱えていて、Webサイトでどんな問題が解決できるのか? ​

→Webサイトやチラシなどを作りたいと考えているユーザが、それらコンテンツの制作のイメージを掴める

Why ユーザーにWebサイトがどんな価値を与えられるか?

→宣伝、集客、認知度UP、売上向上などを実現できる​

Who 誰に

→経営者など(ビジネス規模、業界は不問)

When ユーザーがいつWebサイトを利用するか

​→勤務中で、特に事業を立ち上げようとしているとき​、事業改変しようとしているとき、古くなったサイトのリニューアルを考えているときなど

Where ユーザーがどこでWebサイトを閲覧するか。どんなデバイスで。

→勤務先でPCで閲覧

ターゲットユーザ

ターゲットユーザ

・HPなどWebサイトをお持ちになりたい方
・男性、女性
・居住地不問(打ち合わせはすべてオンラインのため)
・個人事業主様、法人様
・協業を考えられている方(Web制作従事者)

ペルソナ

都内在住30歳男性の田中健史(仮名)はメーカーで会社員として働いていたが28歳のときに独立した。都内を中心に活動しておりドローンの開発を進めている。近々法人かも検討しており、本格的なHPを用意したいと思っている。HPを作るのは初めてで何からやればいいのか分からないため、初心者でも安心して頼める業者を探している。予算は40万円。

機能

機能(制作)

フィルタリング機能、新着作品の投稿、カテゴリー​、CMS(WordPress)​、レスポンシブ、お問い合わせ​フォーム(MW WP Form)、reCAPTCHA v3、ページネーション​、パンくず​

機能(運用)

SSL

検索キーワード

ネット集客は現在考えていない

デザイン

カラー
  • メインカラー

    #b39e89

    サブカラー

    #ddd5d0

    #efece8

    ベースカラー

    #fafafa

    #ffffff

    落ち着いた印象にしたかったためブラウン系、ベージュ系という同系統の色でまとめた。テキストの色は背景とうまく馴染むようにやや明るい黒(#3d3b3c)を使用した。

フォント
  • 英文タイトル

    Cormorant Garamond

    和文タイトル

    Noto Serif JP

    本文

    Arial

    柔らかく上品な印象に見せるため、タイトルは和文も英文も細い書体を選んだ。作品ページの本文は文章が長いため可読性の高いゴシック系を選んだ。