松澤印刷様

/

松澤印刷サイトモックアップ

80年の歴史ある印刷会社様のサイトリニューアルを担当しました。

コンテンツ作成、写真の提供など松澤印刷様の協力があったからこそ、完成にたどり着くことができました。
ありがとうございました。

サイトはコチラから→松澤印刷株式会社

目次

コンセプト

以前のサイトは15年以上前に作られたもので、以下のような問題がありました。
・モバイル対応できていない
・PCデザインもカラムが狭い
・事業紹介ページなど出来ていない部分があった
更新がしづらい

社長の意向で歴史はあるものの、印刷会社らしくしなくて良いという指示を受けました。
というのも、印刷業をベースとして「紙」に関わる様々な事業を行っていきたい思いがあり、新しい看板になるようなサイトにしてほしいとのことでした。

デザインは基本的に全て任せると言われましたので、自由にやらせていただいました。ありがとうございます!

調査として「印刷関連会社」のサイトを30件ほど調べました。
古めのサイトから、業界最大手企業のサイトなど。
気づきを以下にまとめます。

・主要フォントとして明朝体を使用しているケースが多い
・2カラムで右側にブログ一覧などがあるパターンが多い
・基本的に横書きのみ
・会社(社屋・オフィス)の写真が入っていない場合が多い(何故?)
・事業紹介ページが画像少なめ、文章のみ

ターゲットは
「小洒落たバーなどに出没し、モダンな家具を好むが、家は昔ながらの和建築である30後半から40代の男性」

アンテナが高く新しいものをキャッチアップするのがうまい、田舎に住んでいてもおしゃれなものを見つけて楽しく生活しているような方。

想像いただけたでしょうか。

ということで「和モダン」をベースとして、デザインを検討しました。

デザイン

コンセプトが決まりデザインです。
今回はデザインと構築を同時に行いました。

「和」な印象を持たせるため、縦書きを多く取り入れました。
縦書きにすることで縦方向の流れがうまく作れたと思います。

色はブランドカラーを取り入れて落ち着いた青を貴重としています。
使用した画像も加工で青みを強くしています。

松澤印刷サイト編集校閲事業ページ

また、全体ページを通してコンテンツのタイトル、テキストを左右に振りました。
視線の移動を入れることでコンテンツの中身をくまなく見てもらええると考えました。
(視線移動で疲れるという意見もあるかもしれません…)

松澤印刷サイト代表挨拶ページ

代表あいさつのページではブランドカラーを使用しつつ、グラデーション+アニメーションで動きをつけています。

長野の自然を背景に取り入れたのもポイントです。

使用技術

WordPressで構築しました。

更新のしやすさを担保することを目的に、ブロックエディタによる更新を提案しました。
有料テーマ「Snow Monkey」を使用しました。
初めて有料テーマを使用しましたが、なるほど有料の価値がある、と。

ブロックエディタの使い勝手が良くて驚きました。
少し触ってもらえば更新も誰にでも任せられると感じました。

プラグインのSnow Monkey Blocksとの連携によって、ブロックエディタで目次の出力やセクションブロックなどが使用できて便利です。

反省点

今回初めてブロックエディタの特性を活かすために、作りながらデザインするというやり方をしました。
この手法自体は悪くはなかったのですが、もう少し事前に案を練ってから作っていく流れにしたら手戻りが少なく済んだかなと。

また、コンテンツ作りの段階でこちらからどんなものが必要なのかさらに詳細に伝えられればスムーズにいけた部分がありました。

良かった点としてはスピード感です。
このサイトリニューアルの最中、簡単な地域情報サイトのデザインからコーディングまでを2日で行いました。
「いつも早くて助かる」と言っていただけています。

価値の1つとして、スピード感を意識していたので嬉しいお言葉でした。

現在はECOサイト構築の学習をしています。
また、運用がキモになるので、広告についても学習中です。
商品開発から行えるようなECサイト案件に携わりたいです。

Contact