広島県呉市のWeb制作
ホームページ制作の個人事務所

Leben(呉市)| ホームページ制作(自社サイト)
TOP

>

制作実績一覧

>

Leben(呉市)| ホームページ制作(自社サイト)

Leben(呉市)| ホームページ制作(自社サイト)

Leben(呉市)| ホームページ制作(自社サイト)

プロジェクト概要

クライアント名

Leben

業種

ホームページ制作会社

サイト種類

コーポレートサイト

担当範囲

企画、ライティング、デザイン、コーディング全て自身で担当しました。

使用ツール

・figma
・Photoshop
・Visual Studio Code

期間

2025年8月〜9月上旬

実際のページ

https://leben-web.net/

課題と、ご要望

・自社サイトがない。
・実績を一覧で見えるようにしたい
・ポップで楽しい感じにしたい
・料金面など分かりやすくまとめたい
・自分んで学んだことをアウトプットするノートが欲しい

解決策、工夫

広島県呉市のホームページ制作会社として、自社サイトを制作しました。
個人事業主なので、情報は多くはありませんが整理された情報でユーザーが、必要な情報をすぐに発見できるよう工夫しました。

またレスポンシブにも対応しており、スマホから見てもタブレットから見ても綺麗に表示させることができます。

デザイン面

ホームページの配色は、親しみやすさとポジティブなイメージがあるオレンジと、オレンジと相性の良い濃いグリーンを使用。

BLOGにアクセスしたユーザーがメニューが目に入るようPC版では左に固定ヘッダーを設置しました。
愛犬と仕事をしているので、各ポイントに犬のイラストを置きました。

全体的に楽しいホームページにしたかったので、背景に緑や茶色の円を置いてデザインにアクセントを加えました。

構成・導線での工夫

TOPページを見るとどんな会社なのか分かるように多めに情報を入れました。

料金や制作な流れは、ユーザー的にも気になるところなので専用のページはありませんが、すぐに飛べるようにアンカーリンクを付けています。

SP版ではお問い合わせに繋がるよう、下に「お問い合わせ」と「ラインで相談」ボタンを追尾させています。

技術面での工夫

お問い合わせフォームの他にも、LINEで気軽に相談できるよう公式ラインを取得しました。

動くロゴはjsonファイルを使用して、容量を小さくしています。
文字やコンテンツを動かしながら表示出せることで、見ていて楽しいサイトにしました。

SEOに強いサイトにしたいので、alt属性を抜けなく入れmetaタグを最適化しました。
また今後アップしていく記事が管理しやすいようにカスタム投稿やカスタムフィールドを使っています。

その他

  • この記事を書いた人(JSON-LD)
  • 該当ページはindex
  • ブログ記事に目次設定

ホームページ制作の流れ

お客様のホームページを作る時同様、必要な情報の洗い出しから始めサイトマップを作成しました。
その後テキストを作成しつつワイヤーフレームを作って行きました。

デザインはfigmaで作成し、完成後にコーディングしました。

公開後も、コンテンツを増やしていく予定です。

Leben

ホームページデザイン情報

Keywords

フレッシュ
ワクワク感
親しみやすさ
信頼感
分かりやすい

Main Colors

#FC6B3F

#0F9C56

#F3F6F9

Fonts

Noto Sans JP

Rubik

デザイン(一部のみ紹介)

Leben
Leben
Leben

※デザインはホームページ制作当時のものです。

実際のページhttps://leben-web.net/

TOP

>

制作実績一覧

>

Leben(呉市)| ホームページ制作(自社サイト)

Leben(呉市)| ホームページ制作(自社サイト)