株式会社fiika(フィーカ)|ウェブ制作・情報設計・システム開発・ウェブコンサル

１０月１４日自社ホームページのリニューアルを行いました。 
会社設立時から合わせて３度目の改定です。 
サイトリニューアルを検討している方の参考になれば幸いです。
初回と、２回目のホームページは、WEBFLOWというノーコードサービス（HTMLコーディングをせずにホームページが作れるサービス）を利用していました。理由は、どのようなお客様におすすめ出来て、どのような事から対応が難しくなるかを判断するためでした。 
実際に半年近く運用してみて、これができればいいのに！など、不自由を感じる事も増えてきたためMODxに変更することに決めました。 
ノーコードでできないことは、また機会があったら記事にします。
今回のリニューアルでは、 
MODxというCMS（コンテンツマネジメントシステム）と、 
NewtというヘッドレスCMSを使ってブログ機能を追加しています。
<h2>なぜ、MODxを選んだのか？</h2>
MODxというCMSは、日本ではあまり馴染のないCMSかもしれません。 
しかし、隠れた名作CMSだと感じています。 
私はもう、14、15年くらいの付き合いになるCMSです。
■MODx 
https://modx.jp/
MODxの良さは、キャッシュ機能が優秀で、表示速度が速く、複数のプログラムを同時に同一ページで走らせても問題なく動作する点につきます。 
が！一番の魅力は、官公庁のウェブサイトにも導入される実績と、WordPressのようにメジャーではないため、悪意のある第三者から攻撃を受けにくいという点につきます。 
また、WordPressは、複数の機能を追加した際に、各機能がぶつかり合ってしまい機能不全を起こすことが多いため、安易にモジュールの追加できず、相性のチェックをしなければいけないという問題が起きないことにあります。 
旧サイトで使用しているPHPなどのプログラムをできるだけ使いながら、サイトのリニューアルを行いたい場合、置き換え候補になるCMSです。過去に前述の理由で、採用媒体や大規模サイト、官公庁のウェブサイトで採用されています。
MODxには、エボリューションと、レボリューションというパッケージが存在しますが、うちで今回選んだのは、「エボリューション」です。
<h2>なぜ、Newtを追加したのか？</h2>
手軽に記事更新を行うために、ブログ機能を追加したいと考えていましたが、MODxはブログ機能がほぼ皆無で、MODx用にブログをつくるよりも、別のブログシステムを追加することを検討していました。 
そんな折、「ヘッドレスＣＭＳを試してみたい」と言われたことをきっかけに、Newtが候補に上がって来ました。
ヘッドレスＣＭＳとは、、、説明が難しくなるので是非ググってみて下さい。
Newtの特徴として、PCでもスマホでも非常にコンテンツの表示が早いことがあげられます。 
ブログシステムは、ユーザーからのアクセスのたびに、表示させる情報（HTMLや画像など）を毎回動的に生成して吐き出すため、比較的表示に時間がかかるものも多いのですが、このNewt！爆速です！！！ 
ローディングの時、くるくる回るアイコンをあまり見る事がなく快適です！
<h2>これから使ってみて、使い勝手や効果をチェック！</h2>
現状MODxについては、不満は全くありません。 
Nwetに関しても、特段困る事はありませんが、スマホからブログを更新する際にPC用の画面が表示されるため、スマホから編集する機能をもう少し高めてもらえるとさらにありがたいと感じているくらい。
今回の組み合わせが使えるようなら、お客様にもご提案していき 
効果を上げていただけるように、ノウハウをためてお伝えしていこうと思っています。
まずは、ヘッドレスCMS「Newt」を使い倒してみたいと思います。

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

<h2>会社をつくったら、やっぱり会社案内が必要だった</h2>
何度デザインしても、会社案内やホームページは「如何に要約するか」で悩みます。 
でもホームページより自由度が高いデザインが出来て楽しい！ 
お客様の会社なら、会社の顔になるのですし非常に気を使ってデザインしまよ！
会社案内の使い方が大分変ってきたように感じます。 
以前は、営業に行った際や、初めてお取引を開始する前に対面でお客様に会社について説明するために利用してきました。 
コロナウィルス（Covid-19）の蔓延によって、営業方法や人との打ち合わせの仕方も大きく変わりました。そんな時代の変化に合わせて見直した会社案内です。
<h2>ファイル容量をできるだけ少なく軽く</h2>
今回作った会社案内は全部で１０ページにしました。 
正味８ページでボリュームはかなり抑えめです。 
PDFでメール送信したり、メールからダウンロードしていただくことが考えられるため、 
出来るだけファイル容量が重くせず、相手のメールボックスの容量を占有しないように配慮してみました。
そのため、画像（ラスターデータ）はできる限り使わず作成しています。
ページの構成は、
<ul>
<li>・表紙</li>
<li>・会社が得意としている点（強み）</li>
<li>・大切にしている考え方（フィロソフィー）</li>
<li>・会社概要</li>
<li>・サービス一覧</li>
<li>・得意としているサービス（情報設計・UI/UXデザイン）</li>
<li>・ホームページ制作の特徴</li>
<li>・効果を上げるホームページをつくるときのポイント</li>
<li>・システム設計、開発、プロジェクトマネジメント</li>
<li>・裏表紙</li>
</ul>
<h2>事業計画を参考にまとめていく</h2>
会社案内をつくる前に創業時の事業計画書に書き連ねたことを再度見直し、まとめ直して作り上げました。 
ホームページづくりの時にもお客様にお尋ねする非常に大切になる項目がいくつかあります。
<ul>
<li>・社名・店名・屋号、その由来</li>
<li>・創業の動機（なぜその事業じゃなければだめだったのか）</li>
<li>・事業の目的（誰の幸せのために行うのか）</li>
<li>・セールスポイント（他社と比べてどんなメリットを与えられるのか）</li>
<li>・自分の経歴、創業メンバーや関係者の経歴</li>
<li>・マーケット内での立ち位置</li>
<li>・設立する立地や周辺環境</li>
<li>・事業コンセプト（いつ、どこで、誰に、何を、どのように）売るのか</li>
<li>・対象顧客（いますぐに買ってくれる人たちはだれなのか）</li>
<li>・見込み顧客（対象顧客に近い存在はだれなのか）</li>
<li>・潜在顧客（どんな人が顧客になりうるのか）</li>
<li>・商品・サービス</li>
<li>・組織体制</li>
<li>・販促方法（どんな方法で認知してもらうのか）</li>
<li>！集客方法（具体的にどのようにしてお客様を探して売るのか）</li>
</ul>
会社を起業したり、事業を始めようとする際に必ずつくることになる「事業計画書」 
この計画書は、創業時に相当なパワーと情熱をもって作り込むけれど時間が経つと忘れてしまうので、 
会社案内やホームページをつくる際に、アップデートすると間違いなく役立ちます。
私は、実に４度目の起業で、事業計画書づくりを少しサボっていたため書き直しました。 
創業時に比べ、考え方や対象顧客が変わった箇所もあり、会社を見つめ直すいい機会になりました。
自分の強みも改めて見直したとき。 
美術大学を卒業したにもかかわらず、「自分がデザインができる事を忘れていた、、、。」 
なんて笑い話をして、周囲の方々に笑っていただきました。
<h2>会社案内にすべては書ききれない</h2>
会社案内だけでは、会社の事は言い尽くせません。 
しかし、少しでも誰かに気に留めていただくには、「だれかの為になること」をできるだけ分かりやすく伝える事が大切です。 
得意な事を書きすぎても、まるで自慢のような会社案内になってしまったら、声もかけていただけなくなる可能性もあるので注意が必要です。 
これまで多くの会社に携わってきた経験を元に試行錯誤しながら作っています。
おそらく、この先何度かアップデートを繰り返すことで株式会社fiikaのステークホルダーの方々にご理解いただける会社案内が出来上がるのだと思っています。
会社案内、、、何から手を付けたらよいのか、ホームページはどうしたらよいのか分からないという方は、ダメもとで私たちfiikaにお声がけください。 
失敗経験だけは、人一倍多い斎藤が転ばぬ先の杖をアドバイスさせていただきます！

紙のデザインは自由度が高くてやっぱり楽しい！会社案内作りました。

<h2>活版印刷の会社が、あきる野オフィスの真下にあった！</h2>
CI（corporate identity）各会社のイメージやメッセージを統一したデザインでまとめ上げ、名刺やウェブサイト、会社案内などのデザインを行っています。 
fiikaで使う名刺や会社案内も自社デザインしており、これまでは街中にある一般的な印刷屋さんにデータ入稿して、オンデマンド印刷をお願いしていました。
ある時、fiikaが入居するオフィスビルの階下に「Bird Design(バードデザイン)」という文字が飛び込んできたため、お尋ねしてみると活版印刷の工房であることが発覚しました。 
これは、何か頼んでみなければ、、、。
当初、写真の名刺よりも、もっともっと情報満載でショップカードのような名刺をデザインしていたのですが、活版印刷が活きるデザインにしようと王道のセンタリングで欧文フォントのみを使用した名刺のデザインに変更しました。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/9c2e19cb-2f73-4cab-b0b5-e7804ca37499%2Ffiika-namecard-macro.png" alt="fiika-namecard-macro.png"> 
お判りいただけますでしょうか。 
このふっくらと優しい感じの紙質に、活版ならではの押し込まれて凹んだ文字やロゴマークのエンボス感！
紙選びから、印刷時の紙の裏側への映り込みまでいろいろ相談させていただき、裏面は無地の名刺が完成いたしました！
この名刺、デザイン関係のお仕事の方や、出版関連、広告代理店の方などがすぐに気が付く！ 
会話を始めるコミュニケーションツールとしても大変役に立っています！
ショップカードや名刺をご検討の際は、ぜひ活版印刷によるデザインを検討してみてはいかがでしょうか！ 
名刺を出す際に、ちょっと気持ちが弾むアイテムになること請け合いです。

活版印刷で名刺を！ふっくらしたエンボス感がたまらない！

今回ネットショップを構築させていただいたのは、純銀のワイヤーや金属線を編み込んでアクセサリーの制作を行われている作家の「木曽 淑枝（きそ としえ）」様のサイトになります。
これまでにテレビ出演や、カルチャースクールで教鞭をとられ数百人のお弟子さんを持つアクセサリー作家さんです。 
日本ではじめて「純銀クロッシェ」という技法を確立され、商標権もお持ちの先生ですが、ネット販売は行っておらずデパートの催事や展覧会で作品を披露し販売されてきました。 
木曽先生の作風は、海外でも需要が見込めそうなため、Shopifyを使って販売することをご提案いたしました。
<h2>外国人に発信・販売</h2>
国内販売については、販路の確立をされていたことから、海外展開と周知を目的に本サイトの構築を行いました。 
そのため、基本的にサイト内の文章は全て英語表記を取っています。国内外の外国人の方々を対象に、パーティや社交界、ショー、イベント、結婚式などで身に付けていただきやすい作品をメインに取り扱いをしていく予定で商品ラインアップを決定しています。
市場としては、主に英語圏と東南アジア各国を見ており、シンガポール、台湾、香港、中国、アメリカ、韓国などが対象国となっています。公開初期は、配送を日本国内に限定することで配送リスクを減らし、日本国内にお住いの外国人や仲介者に販売することからスタートする予定です。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/5a88716a-b256-4f59-8878-0bb5dda0f38c%2Fimg-blog-toshiekiso02.png" alt="img-blog-toshiekiso02.png">
<h2>SNS運用では自然な表情や日常生活に触れる撮影をする</h2>
SNSｎ運用も含めご契約予定の為、運用方法についても詳細なお打ち合わせを行ってきました。 
先生の作品は、植物や自然の造形美、曲線を活かしたものが多く、日常生活で触れる素材からインスピレーションを得ているため、普段から作品に活かせる素材はないかと探している先生の感性を多くの方に感じてもらうことを目的としています。 
素材探しのスナップショットや、海や川、はたまた蚤の市などで覗かせる先生の表情を切り取り作品の世界観を感じさせる戦略を取ることで、作品が生まれる裏側をSNSで発信しより作風の理解をしていただくことを目標にしています。
<h2>純銀クロッシェが生まれる経緯をヒアリングして しっかり原稿をウェブコピーライティング</h2>
植物や自然の造形美、曲線を活かした作品の数々は、日常生活で触れる素材からインスピレーションを得ているため、普段から、作品に活かせる素材はないかと探している先生の感性を多くの方に感じてもらうことを目的としています。 
素材探しのスナップショットや、海や川、はたまた蚤の市などで覗かせる、先生の表情を切り取り、作品の世界観を感じさせる戦略を取ることで、作品が生まれる裏側をSNSで発信し、より作風の理解をsh手いただくことを目標にしています。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/ffddaa0d-b490-45db-950a-465fbf588bef%2Fimg-blog-toshiekiso03.png" alt="img-blog-toshiekiso03.png">
<h2>高解像度の写真の撮影を行い、作品のディテールを余すところなく魅せる！</h2>
商品の物撮り撮影も当社でも行い、作品の緻密な編み込みや繊細な曲線、光と影が織りなす複雑な色合いの変化を楽しんでいただくため、高解像度の写真をあえてショップに掲載しています。 
すべてが一点ものの作品の為、カタログや作品集としてもご利用いただけるクオリティで写真撮影を行っています。
ご購入いただくまでに時間を要するアクセサリーをぜひじっくりご覧いただきユーザーにご満足いただけるサイト作りを目指しています。
<h2>レベニューシェア契約や、構築のみのご相談も承っています。</h2>
ネットショップをすでにお持ちの方や、集客がうまくいかず伸び悩んでいらっしゃる場合はぜひご相談ください。 
もしかしたら、潜在顧客や見込み顧客は別のキーワードで検索していたり、まったく別の切り口で需要を持っているかもしれません。 
ターゲットの洗い出しやペルソナの想定、検索キーワードや、読み物コンテンツの制作など、幅広い確度でお手伝いが可能です。 
ショップの構築のみでも承っています。 
また、レベニューシェアリングによる運用支援も行っています。 
詳細は、お問い合わせいただければ幸いです。

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

インターペット2022でご利用になられるブースのコーディネートと、商品紹介動画の作成をさせていただきました。 
実際に設計・デザインさせていただいた展示会ブース内のパネルや、ブース内への誘導パネルと商品紹介動画がキービジュアルの画像です。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/38b02860-eeac-4281-86df-0e09518bb7c1%2Fimg-blog-cure-01.png" alt="img-blog-cure-01.png">動画内の商品紹介部　商品の特徴と対象ペットに対しての配慮を記載
<h2>展示会で、継続販売事業者を見つけるためのブース設計</h2>
<ul>
<li>商品紹介動画作成</li>
<li>展示パネルデザイン（キャッチコピー　コピーライティング）</li>
<li>展示ブース導線設計</li>
<li>ターゲット層洗い出し　ペルソナの整理</li>
</ul>
今回お手伝いさせていただいたお客様は、自社プロダクトとして犬・猫やペット用に天然・無農薬・無添加素材で作られたスキンケアプロダクトを開発されている企業様です。 
キュア株式会社様は、2022年４月初旬に開催された、インターペットという展示会に出展されるという事で、動画制作のみのご依頼で当社にご相談をいただきました。 
ペットの肌や身体に負担をかけない商品を展開されており、まずは、BtoB販売で継続的なご利用をされる事業者様と繋がり、販売数を増価させる事を目標とされていました。 
そのため、潜在顧客・見込み顧客の洗い出しを行い、想定されるペルソナを検討。 
そのうえで、展示会場の通路からブース内への導線計画を行い、展示パネルのデザイン制作を行いました。建築設計を行っていた昔取った杵柄が非常に役立ちました。 
パネルデザインには、ウェブやネットショップ、実店舗のマーケティングで有用なキャッチコピーの設計ノウハウを活かし、商品動画のデザイン・コピーライティング全般を行っています。 
本件は、建築設計ノウハウや、ウェブコピーライティング、商品販売におけるマーケティング手法でお力添えさせていただけたウェブ制作にとどまらないプロジェクトとなりました。 
 
<h2>他社との差別化がしやすく、ユーザーの悩みを解決できる商品</h2>
天然無添加をうたっている商品は他社製品にも存在しましたが、防腐剤や化学薬品を使わないことに徹底的にこだわった製品は、他社がなかなか手を出せない領域という事もあり、非常に特徴的な商材です。化学薬品を不使用とすることで商品の消費期限が短くなることもいとわず、ペットの皮膚に対する負荷を如何に軽減させるかを追求された商品に驚きを隠せませんでした。 
一般的には、防腐剤などを使用して消費期限をできるだけ伸ばすなか、こちらの商品は、弱酸性シャンプー以外は、徹底的に天然・無添加・無農薬・化学物質不使用にこだわって作られたものでした。 
オーナーの動物たちに対する想いが、アレルギーや皮膚病、化学物質に対して反応しやすい体質のペットのために生み出された商品だという事が非常によくわかります。 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/a013a531-2b26-40e4-9ff7-0b7b2784ab4c%2Fimg-blog-cua-04.png" alt="img-blog-cua-04.png">ペット用 天然無添加スキンケア商材「Laru/Laru」 
左からスキンケアクリーム、泡ハーブソープ、植物石鹸シャンプー、食用荏胡麻オイル、鹿肉ブロック 
 
<h2>コストを抑えつつ・ハイブランド感を演出</h2>
既存商品ラベルでご利用になっていたアートワークを活用し、ハイブランド感と訴求メッセージをどのように調和させるかを模型を制作しながら、何度もスクラップアンドビルドを重ね検討させていただきました。
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/36cdbd63-7bb4-4703-bbd9-2a7b610386f0%2Fimg-blog-cure-02.png" alt="img-blog-cure-02.png"> 
検討を重ね、何度も作り直した模型や、お客様とのミーティング時に行ったブレインストーミングの手書き資料
UX（ユーザーエクスペリエンス）ユーザー体験を、ペルソナ別に推測し、各ペルソナの中で最も訴求したい、事業者（トリマー、動物病院など）へのキャッチコピーを複数作り、模型上での確認を行いました。主に３エリアに分類し、ユーザーのブース内誘因設計を行いました。 
<ul>
<li>通路側導入部（最初の顧客接点で、天然・無添加スキンケア商材の取り扱いを訴求）</li>
<li>展示ブース壁面（商品の特徴や、商品への想いの訴求）</li>
<li>展示物前（各種商品別に、どのような効能と利用シーンがあるかを説明）</li>
</ul>
という形で、来場者の導引レベル別タッチポイントを設計しました。 
通路導入部では、クライアントの製品にどのような特徴があるのかを伝え 
展示ブース壁面は、通路からも可読できる文字サイズで、商品及び、だれのために作られたものかを訴求し 
展示物前では、各商品についてブレイクダウンした内容を掲示し、スタッフが補足説明をする流れを構築しました。 
動画は、スタッフが商品を薦める際に、実際の使い方を撮影していただき、画面を見ながら説明することを念頭に置いて制作しています。 
動画をループ再生し、スタッフが応対できない際も商品を手に取っていただけるように動画内で製品別の特長を記述して、商品への興味を引くような設計を施しました。 
上記施策をもっても、実際にターゲットにしている顧客層は、 
ペットの取り扱い時に、アレルギーや肌トラブルを持ったペットに関わっている方の為、 
健康な犬猫のみ対象としている方は中に入ってくることはないだろうという状態でターゲットのフィルタリングを意識しました。 
商品原価が比較的高いため、ご利用いただける対象者も多くなく、 
実際に肌トラブルを抱えたエンドユーザーや、事業者との接点を創出することを目的としたブースに仕上げました。 
継続的に事業者様へ販売し、継続的なキャッシュフロー獲得を意識したブース設計をご提案しました。 
 
<h2>能動的に検索している動物の皮膚トラブルに困っている方々へお届けしたい</h2>
キュア株式会社様の製品は、ユーザーの「困りごと」を解決してあげられるものであり、また、競合性が低いため、まさにネット販売向きの商材といえます。 
そのため、今後はネットショップのウェブコピーライティングに力を注ぎ、コンシューマーにアプローチを行うネット戦略を行っていく予定です。 
今すぐ需要が強いユーザーのみならず、見込み顧客、潜在顧客を発掘するために、オウンドメディアの立ち上げを行い、記事コンテンツできちんと製品の知識を得ていただき、理解が深まったユーザーもしくは、問題解決を望むユーザーから購入していただける仕組みづくりを行っていく予定です。 
弊社では、お客様の商材の潜在顧客発掘や、オウンドメディアづくりをお手伝いし、ウェブコピーライティングや、ウェブマーケティングの効果を実感いただけるお手伝いを行っています。 
同様のお悩みをお持ちの方は、お気軽にお問い合わせいただければ幸いです。

キュア株式会社様　獣医・トリマー事業者向け　ペット用 天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

<h2>やわらかく、やさしいタッチのほんわかイラスト</h2>
fiikaのウェブサイトを見ていただいた中で、特に目を引くのがハヤシコウさんが描くイラストたち。 
どのイラストも、どこか優しい感じでほんわかしている、まるで絵本の中に入ってきたかのようなぬくもりを感じていただけてるんではないでしょうか？ 
イタリア大好きなハヤシさん、パスタやピッツァもシズル感があって、とってもおいしそう！ 
 
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/99640f9c-c9bd-4292-af00-abfe5a0ac958%2Fimg-blog-illust-01.png" alt="img-blog-illust-01.png">
ハヤシさんは、多摩美術大学を卒業されたデザイナーで、イラストだけでなくロゴデザインなども手掛け、雑誌にイタリア料理のレシピを紹介したり、イタリアワインの紹介やイベントまで主宰しちゃうこだわり派。 
お菓子屋さんや、飲食店、バーや、工房、学習塾や学校などで使われたら、とっても似合いそうなテイストです。 
ホームページだけではなく、メニューやポスターにも使える映える事間違いなしのデザインです！
<img src="https://storage.googleapis.com/p_62efd66ced34ddfe9e141e2e/8d2156f9-cd69-4eed-9c50-be54aa95d939%2Fimg-blog-illust-02.png" alt="img-blog-illust-02.png">

#デザイン

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

紙のデザインは自由度が高くてやっぱり楽しい！会社案内作りました。

活版印刷で名刺を！ふっくらしたエンボス感がたまらない！

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

キュア株式会社様　獣医・トリマー事業者向け　ペット用天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

fiikaのイラストは、ハヤシコウさん　えんとつ町のプペルのロゴを手掛けたデザイナー

#デザイン

ウェブ制作会社が自社サイトのリニューアルで選んだブログとCMS

紙のデザインは自由度が高くてやっぱり楽しい！会社案内作りました。

活版印刷で名刺を！ふっくらしたエンボス感がたまらない！

Toshie Kiso様 Shopifyを使った純銀線アクセサリー販売ネットショップ構築

キュア株式会社様 獣医・トリマー事業者向け ペット用 天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

fiikaのイラストは、ハヤシコウさん えんとつ町のプペルのロゴを手掛けたデザイナー

キュア株式会社様　獣医・トリマー事業者向け　ペット用天然無添加スキンケア用品の展示会ブース設計、商品紹介動画作成、コピーライティング

fiikaのイラストは、ハヤシコウさん　えんとつ町のプペルのロゴを手掛けたデザイナー