東京都港区の不動産会社『広栄不動産』様のホームページを弊社にて制作させていただきました。

株式会社広栄不動産とは

東京都港区の田町エリアを中心に不動産の売買や賃貸を取り扱っている不動産会社様です。
創業40年を迎える老舗の会社様で、ホームページの更新頻度は高く、物件情報から地域の情報まで「住まい」に関する情報を多く発信しています。
是非一度、ご覧になってください。

広栄不動産様のホームページはこちらから。

ホームページをWordPress化

広栄不動産様は既にホームページを運用しておりましたが、トップページや会社概要は静的なHTML形式のページで運用し、ブログはWordPressで運用しておりました。
今回のリニューアルを機に、WordPress一本で全てのページが管理・更新できるように実装させていただきました。

全体的な構成について

今までのホームページは賃貸物件の仲介をメインとしたページ構成となっていましたが、今後は不動産の管理にも力を入れたいとのことをヒアリングにてお伺いしました。
そのため、トップビューでコンテンツを大きく二つに分けて表示することで、広栄不動産様の業務がユーザーに明確に伝わるように実装しました。

白を基調としたデザインへ

ホームページの色は白を基調として、文字や色のついた箇所が目立つようにデザインを整えました。

画像スライダーの設置

トップビューには画像スライダーを設置して、自動でスライドするように設定しました。
ホームページに動きを付ける事でユーザーが注目する箇所を作り、広栄不動産様が推したいコンテンツやキャンペーンがユーザーにしっかりと伝わるようにしました。

最大限ブログを活かせるように配置を整える

広栄不動産様はブログの更新頻度が高く、様々な情報を発信しています。
そういった新しい情報がしっかりとユーザーに伝わるように「お知らせ」「賃貸経営について」「入居者様の声」などの各カテゴリーの最新記事が自動で表示されるように実装しました。

全ページレスポンシブ化

弊社のホームページ制作はレスポンシブデザインが基本となりますので、WordPress内の全てのページがレスポンシブ対応となっております。
広栄不動産様は別のWordPressでブログを運用していましたが、そちらの記事は全て今回作成したWordPressに移植し、新しいデザインで閲覧できるように調整しました。

スマホ画面の操作性を向上

スマホ画面では画面の上部に「問い合わせ」「賃貸希望条件登録」「電話」の三つのアクションがワンタップで行えるショートカットアイコンを設置することで、ユーザーがどの画面にいても問い合わせができるようにしました。

制作期間について

ヒアリング　　：約3日
デザイン・調整：約5日
実装　　　　　：約8日
確認・調整　　：約1日

お使いのシステムがスマホ対応しておらず、お困りの皆様へ

お使いの管理システムがスマホ対応していない場合でも、弊社にてスマホ対応を実現するお手伝いをすることができます。
スマホ対応している別のシステムに乗り換えることも一つの方法ではありますが、現在の使い慣れたシステムを変更するのはコストや手間の問題で難しいことです。
今回の例のように、弊社にてスマホ対応をお手伝いさせていただくことで、使い慣れたシステムを使い続けることができます。
お気軽にご相談ください。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

アイホームズ様のホームページ（Webサイト）を弊社にてフルリニューアルさせていただきました！

アイホームズ株式会社とは

埼玉県和光市で不動産売買および賃貸を取り扱う地域密着の不動産会社様です。
ホームページに力を入れており、豊富な写真はまるで内見をしているかのような充実度です。

物件の情報は休業日を除き毎日更新されており、代表の飯牟礼様や賃貸担当の田村様のお人柄が分かるブログもほぼ毎日更新されております。
ホームページは現在も改良を行っておりますので、本記事の公開日以降は更にホームページが良くなっていることが考えられます。

アイホームズ様のホームページはこちらから！

ホームページをフルリニューアル

アイホームズ様は既にホームページを運用しておりましたが、やや複雑な導線をしていたため、ユーザーが迷ってしまいそうな箇所がいくつかございました。
また、色彩に関しても強い色が複数の箇所で使用されており、どこのコンテンツも等しく強調されていたため、ユーザーがどこに注目して良いのか迷ってしまいそうなデザインとなっておりました。

上記の不安要素を解消するために、本件では下記の項目を優先してWebサイトのデザインを考えました。
・ユーザーにわかりやすく、使いやすい構成にする
・ユーザーがストレスを感じない色彩にする
・ユーザーに対して「どこに注目すべきか」を、色、文字、装飾等で示し、よりわかりやすいサイトにする

完成したホームページのスマホ画面とPC画面は下の画像になります。

フルHD（1920×1080）の液晶モニタで見た場合でも、横の幅を有効活用して全画面を使うようにデザインを整えました。
また、配色も淡い色を基調として、ユーザーにとっては親しみやすく、サイト運営者としてはコンテンツに強弱が付けやすいように全体を整えました。

スマホ画面で見た際には、スクロール量が多くならないようにグローバルメニューとサイドメニューを画面右上のボタンで開閉式にすることで、コンパクトでストレスを感じない画面になるように仕上げました。

・右上の「メニュー」ボタンを押すことでグローバルメニューが開きます。

・右上の「サブメニュー」ボタンを押すことでサブメニューが開きます。

画面の下部には、ユーザーがアクションを起こしやすいように「電話」「メール（問い合わせ）」「LINE＠」がワンタッチでできるようにボタンを設置しました。

各ページもリニューアルサイトに合わせてレスポンシブ化を実施

「会社概要」や「不動産売却についてのご案内」のページ等、各ページもリニューアルに合わせてレスポンシブ化を実施しました。

・会社概要ページ

・不動産売却についてのご案内ページ

物件ブログの「おすすめ」や「新着」をトップページに自動で表示

アイホームズ様は物件ブログを運用しておりますので、ブログの更新があった際には自動で情報が表示されるようにシステムを組み込みました。
ブログの内容次第で「新築」や「中古」のアイコンが自動で表示されるようにもなっております。

スマホ画面の際にはコンテンツが縦に並ぶように整えてコンパクトにまとめました。

物件ブログが物件情報に特化したページになるようにシステムを組み込む

物件ブログは通常のブログとは異なり、一目で物件の概要が分かるようなページとして表示されるようにシステムを組み込みました。

各市区の情報に特化したページを作成して分かりやすいサイトに

アイホームズ様は和光市、板橋区、練馬区、朝霞市、志木市の物件を扱っておりますので、各市区の情報に特化したページを作ることで、わかりやすい導線になるようにしました。
・和光市に特化したページ

トップページと同じように、和光市のおすすめ物件や新着物件がブログで投稿された際には、自動で表示されるようにシステムを組み込みました。

更に、ブログで各市区に関する情報を更新した際にも、ページの下部に記事が表示されるようにシステムを組み込みました。
ブログの内容を自動で表示するシステムを実装することで、今まで行っていた「情報の更新があったら他のページの更新も行わなければならない…」という手間を省くことができ、かつ最新の情報を常に表示することが可能となりました。

また、各市区でテーマカラーを設定して全体の色を統一することで、ユーザーがどのページを見ているのかが色でも判断できるようになり、よりユーザーフレンドリーなサイトに仕上がるようにしました。

・板橋区に特化したページ

・朝霞市に特化したページ

会員用のページは特別感が出るようにデザインやシステムを実装

購買意欲が高いと考えられる会員様に対しては、専用のページを作成することで特別感を演出するようにしました。
通常の各市区のページよりもややリッチなデザインになっております。

PC画面で見た際にはそこまで大きな違いはありませんが、スマホ画面で見た際はちょっと変わったシステムを導入しております。
下の画像はスマホで見た際の画面になります。

検索用のリンクが見当たりませんが、各市区のコンテンツをクリックすると横からスライドして検索用の画面が表示されます。
右上の×ボタンを押すことで検索画面を消すことができます。

このように、他のページとは違うシステムを導入することで、会員様に特別感を与える仕様にしました。

不動産システムの物件一覧ページもリニューアルサイトに合わせて構成を変更

アイホームズ様が使用している不動産システムの物件一覧ページも、リニューアルサイトに合わせて構成を変更しました。

各物件に表示されるコメントは、スマホ画面の際にはスクロール量を増やす原因となり、ユーザーにストレスを与える可能性が高いため、画面の横幅によって表示内容が変わるシステムを実装することで、よりユーザーフレンドリーなサイトになるように仕上げました。

不動産システムの物件詳細ページもリニューアルサイトに合わせて構成を変更

アイホームズ様が使用している不動産システムの物件詳細ページも、リニューアルサイトに合わせて構成を変更しました。

アイホームズ様は豊富な写真があることが特色の一つなのですが、豊富な画像はスマホ画面の際にはスクロール量を増やす原因となり、ユーザーにストレスを与える可能性が高いです。
そのため、画面の横幅によって画像を横スクロール形式で表示することによって、よりユーザーフレンドリーなサイトになるように仕上げました。

制作期間について

構成検討：約7日
デザイン：約7日
実装：約8日間
確認・調整：約7日

お使いのシステムがスマホ対応しておらず、お困りの皆様へ

お使いの管理システムがスマホ対応していない場合でも、弊社にてスマホ対応を実現するお手伝いをすることができます。
スマホ対応をしている別のシステムに乗り換えることも一つの方法ではありますが、現在の使い慣れたシステムを変更するのはコストや手間の問題で難しいことです。
今回の例のように、弊社にてスマホ対応をお手伝いさせていただくことで、使い慣れたシステムを使い続けることができます。
お気軽にご相談ください。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

旭町3丁目不動産様の不動産管理WEBシステムのスマホ対応を弊社にて実装させていただきました。

旭町3丁目不動産とは

高知県高知市で不動産賃貸を取り扱う地域密着の不動産会社です。
高知市外から初めてきたお客様へ「困った時に相談できるつながり（人脈）」を作るために「竹村会」を開催するなど、お客様とのつながりを大事にする不動産会社様です。

物件一覧ページをレスポンシブ化

物件の一覧を表示するページをレスポンシブ化致しました。

スマホ画面の際にはスマホで使いやすいメニューを表示

PCの際に表示しているメニューはスマホでは横幅が狭くて表示ができないため、スマホ画面サイズの際にはスマホで使いやすいメニューを表示するように実装しました。

スマホ画面の際には必須情報のみを表示

PCの際に表示しているテーブルの情報はスマホでは横幅が狭くて表示ができないため、スマホ画面サイズの際には必須情報のみを表示するように実装しました。

スマホ画面の際のみお問い合わせ関係のボタンを表示

ユーザーがいつでも気軽に問い合わせができるように、スマホ画面サイズの際にはお問い合わせを常に画面の下部に表示するように実装しました。

スマホ画面の際に「続きを読む」のリンクを表示してスクロール量を軽減

PCの際に表示している豊富な情報量は、スマホ画面サイズの際にはスクロール量を増やしてしまう要素となってしまいます。
そのため、スマホ画面サイズの際にはある程度の情報量だけを表示して、続きはリンク先で見られるようにすることでスクロール量を軽減しました。

物件詳細ページをレスポンシブ化

物件の詳細を表示するページをレスポンシブ化致しました。

スマホ画面の際にはスマホで使いやすいメニューを表示

PCの際に表示しているメニューはスマホでは横幅が狭くて表示ができないため、スマホ画面サイズの際にはスマホで使いやすいメニューを表示するように実装しました。

スマホ画面の際に複数の画像をスライド化することでスクロール量を軽減

PCの際に表示している豊富な画像は、スマホ画面サイズの際にはスクロール量を増やしてしまう要素となってしまいます。
そのため、スマホ画面サイズの際には画像のエリアをスライド化することでスクロール量を軽減しました。

スマホ画面の際のみお問い合わせ関係のボタンを表示

ユーザーがいつでも気軽に問い合わせができるように、スマホ画面サイズの際にはお問い合わせを常に画面の下部に表示するように実装しました。

建物ごとの概要表示ページをレスポンシブ化

建物の概要を表示するページをレスポンシブ化致しました。

スマホ画面の際にはスマホで使いやすいメニューを表示

PCの際に表示しているメニューはスマホでは横幅が狭くて表示ができないため、スマホ画面サイズの際にはスマホで使いやすいメニューを表示するように実装しました。

スマホ画面の際に複数の画像をスライド化することでスクロール量を軽減

PCの際に表示している豊富な画像は、スマホ画面サイズの際にはスクロール量を増やしてしまう要素となってしまいます。
そのため、スマホ画面サイズの際には画像のエリアをスライド化することでスクロール量を軽減しました。

スマホ画面の際のみお問い合わせ関係のボタンを表示

ユーザーがいつでも気軽に問い合わせができるように、スマホ画面サイズの際にはお問い合わせを常に画面の下部に表示するように実装しました。

スマホ画面の際には必須情報のみを表示

PCの際に表示しているテーブルの情報はスマホでは横幅が狭くて表示ができないため、スマホ画面サイズの際には必須情報のみを表示するように実装しました。

満室の場合は満室であることをわかりやすく表示するように実装

「情報がない場合にわかりやすく満室であることを伝えたい」というお客様のご要望がございましたので、満室の際はわかりやすく表示するように実装致しました。

制作期間について

ヒアリング：約5日
デザイン・調整：約5日
実装・調整：約8日間
確認・調整：約1日

お使いのシステムがスマホ対応しておらず、お困りの皆様へ

お使いの管理システムがスマホ対応していない場合でも、弊社にてスマホ対応を実現するお手伝いをすることができます。
スマホ対応をしている別のシステムに乗り換えることも一つの方法ではありますが、現在の使い慣れたシステムを変更するのはコストや手間の問題で難しいことです。
今回の例のように、弊社にてスマホ対応をお手伝いさせていただくことで、使い慣れたシステムを使い続けることができます。
お気軽にご相談ください。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

身内の誕生日にちょっと横浜まで足を伸ばしたのですが、こんなのやってました。

横浜ベイクォーター：かもめマルシェ

予定も毎回更新されているようですのでご興味ある方ぜひ。かもめマルシェは月に一度のようですね。基本的には11:00～17:00の間で、さほど規模的には大きくないですが、えりすぐりの商品がそろっていました。

ちなみに上記HPから出店も応募できるようですよ。

NKBマルシェ事務局とは、2009年秋より、 生産者と消費者を食でつなげるプロジェクト”マルシェ・ジャポン“に参画している「都市型市場」の運営事務局です。

かもめマルシェはこのNKBマルシェが運営しているマルシェ＝市場の一つですね。他にもYEBISUマルシェやTERRACEマルシェを運営していらっしゃるようで、コンセプトは「食べる人（消費者）が作る人（生産者）と直接会話することで農産物を作る過程のストーリーを知っていただき、顔が見えるコミュニケーションのお力になりたい」とのことでした。地域コミュニティの多数連結を目指しているわけですね。

さてみなさん、上記の「マルシェ・ジャポン」というものをご存知でしょうか。

マルシェ・ジャポン

お恥ずかしながら、私はこの「マルシェ」というもの、お祭りの露店みたいなものだと考えていました。まあ大まかには間違っていないのでしょうが、感覚としては「フリーマーケットやフェアみたいなもの」であり、定期的に開催されているものだとは知らなかったのですね。行った場所でやっていればラッキー、くらいの感覚です。
わたしが「食材を作る人」と「それを料理して食べる人」が出会う場所が、農林水産省の支援で全国で展開されていると知ったのは、実はここ最近のことなのです。

昔の味たまご農場さんから教えてもらった「都市型市場＝マルシェ」

私がこの「マルシェ」を知ったきっかけはこちら。

昔の味たまご農場

はい、インクループのお客様です。大変繊細でなめらかでうっとりとするような濃厚なたまごを楽しませていただいております。毎回打ち合わせにいくM氏に「お願いします！」と言ってたまごを買ってきてもらいます。
余談ですが、この間いただいたプリンが非常にわたし好みのかためのプリンでして……カラメルもこっくりとほろ苦い味わいで……なめらかなたまごの風味でして……よかったらこちらもぜひ……。

閑話休題。

昔の味たまご農場さんは積極的にあちこちのイベントに顔を出されている反面、おいしいたまごの通販にも力を入れていらっしゃいます。それのお手伝いをさせていただいているのが当社となります。

マルシェの存在やその運営のされ方の一端を見て、興味を持ったのがわたしのきっかけでした。
つまり、こういったきっかけがなければ、わたしのようなカスタマーはマルシェの在り方、そこに出店されているお店、商品などに、まったく興味を持たないのです。

土日でお客さまもたくさんいるはずなのに、お店の前を素通りする人のなんて多いことだろう！　とびっくりしてしまいました。規模や知名度、天候の問題もあるかもしれませんが、本当に問題はそれだけでしょうか。

「売り手」と「買い手」の齟齬　～「食べれば」わかるは、もう通用しません！～

ウェブマーケティングをしながらウェブデザインをしている当社ですが、食材や食品、商品を扱う時にこんなふうにおっしゃる方がいます。

「来てもらえればわかる」「食べてもらえればわかる」「使ってもらえればわかる」

正直これらはもう通用しません。
なぜならカスタマーは「行く前に」「食べる前に」「使う前に」わかりたいからです。

地図を見ないで、装備なしで、仲間なしで、冒険に出る勇者は、大概途中で死ぬんです。
そしてカスタマーは死にたくないのです。多くの人は勇者ではないですから。

近年パソコンやスマホによってインターネットが普及し、情報は飽和していつでもどこでも誰でも欲しい情報を手に入れることができるようになりました。新しい情報が生まれる傍らで、古い情報は死んでいき、たまに化石となって残っている、それが現在のインターネットの海の状況です。
中には、店で直接商品を見て、その場では買わず、ネットで購入、なんて例もあるくらいです。特に中型から大型の商品には多い傾向にありますが、小物でもネットショッピングのほうが安いからそっちで……なんてこともあるのです。

つまり、ネットで情報を積極的に配信していない場合、情報は死んでいる、のではなく、「生まれていない」といえるでしょう。
そうなったらどうなるか。「生まれていないのだから存在を認知されない」という、なんですかね、哲学チックなことになります。

• 情報を発信しないと認知されない（知らないものは「ない」と同じ）
• 情報を発信しないと比較されない（商売の舞台にあがれない）

お店を、商品を知ってもらわなければ、カスタマーは「購買意欲」までたどりつきません。これは100％そうだといえるでしょう。昔はそうだった、と言っても、現在は情報の流通によって「買い物に対する慎重度」というのは格段に高まっていますから、昔と比較しても……といったところでしょうか。

食材、食品を購入する際にカスタマーが必要とする情報とは

ではカスタマーは具体的にどんな情報を求めているのか？　という点に関してですが、今回は特に食材についてピックアップしてみましょう。

• おいしさ
• 安全性
• 栄養価
• 値段

この情報は、カスタマー1人1人によって異なってきます。安全性よりおいしさや値段を選択するカスタマーもいれば、値段を問わず安全性のみを求めるカスタマーもいるでしょう。
それを踏まえた上で、以下のようなものが参考としてあげられます。

おいしさ

商品の「個性」。作り手（＝売り手）が他競合と比較された時に胸を張って言い切れるもの。
ここが全くない「無個性」の場合は、大量生産物と変わらないので、尖ることができず、ニッチな部分の需要が高まっている現代において勝ち残っていくのは難しいでしょう。ブランディングの問題です。

安全性

アレルギー、農薬物の使用有無、賞味期限など。

栄養価

商品のベネフィットになります。とくに健康を重視するカスタマーには響きますし、お子さんをお持ちのご家族などもベネフィットになりえます。

値段

税込、税抜、どちらであるかはきっちりと。通販の場合は送料も。

これらはわたしがマルシェに足先を向けた時に「ほしいな」と思った情報がメインになります。
あのですね。

試食だけじゃわからんのですよ。

だって、カスタマーは、農業のプロじゃないんです。

情報を展開するツールは何が必要？

「パンフレットいただけますか？」「もちろんですよ！」

この会話をして、おうちでパンフレットを広げた時に、

「なんっっっっっっっっもわからねえ……」となった人がこちらです。ホームページない！　検索しても出てこない！　SNSもない！　うそでしょ！　ってなりました。

パンフレット一枚では上記の情報は書ききれない！　という気持ちはわかります。A4三つ折り、さほど情報は詰め込めません。厳選しないとろくに伝わらない、グラフィックの欠点は「物理的に存在する」ことであり、これがまた正しく利点でもあります。
パンフレットに記載しておくと「情報が展開できるツール」は以下の通り。

• 電話番号
• SNS（TwitterやFacebook）
• ウェブサイト

SNSは無料で作ることができるので、手軽に情報展開ができます。「情報展開って何をすればいいの……？」となるかもしれませんが、それはもちろん、上記の「カスタマーが必要としている情報」を中心に、「カスタマーに知ってほしい情報」を展開すればいいのです。農業に対する思いとか、不安とか、情熱とか、いろいろありますよね。

ウェブサイトなんか作るお金もないし自分で作るのも無理！　という方は無料のブログを借りて書いてみてもいいのです。ショップ名検索した時になんにも引っかからないときのがっかり感は結構半端ないダメージですぞ！
こういう時に何が起こるかというと、同じマルシェに定期的に来ない場合は「マルシェに出店してもリピートしてくれるカスタマーが出てこない」ということになりうるのです。
「パンフレットに電話番号あるよ！」と言ってもパンフレットを始めとするチラシやリーフレットの欠点は「物理的に存在すること」、これはすなわち「捨てられたら終わり」ということでもあるのです。

その点ネットの情報は、一度アップロードしたら「消えない情報」になります。
……ただ、「消えない情報」ということそのものがデメリットにもなりますので、更新作業が必要になってくるのですけれど……。

ホームページを持っているなら今すぐ確認を！

デザインの視点から見たホームページの見直しポイントは以下の通り。

1.写真はきれいですか？

「プロみたいな写真を！」と言っているのではありません。ポイントは、被写体はきちんとカメラ内に収まっているか、撮影してカスタマーに伝えたいところを伝えられているか、ピントは合っているか、色飛びしたり反射したりしていないか。
「あ、おいしそう」と思わないと、カスタマーはすぐに去ってしまいます。枚数が多ければいいというわけでもありません。写真は「絵で情報を伝える」ためのものであって、情報は3～5つくらいがベストです。だから一つの情報に対し、写真は5枚が限界ということですね。

2.フォントサイズは16px以上になっていますか？

大事です。
読めるか読めないかの瀬戸際12pxを使っているHPはご注意下さい。割と読めません。

3.スマートフォン用ページ、あるいはレスポンシブになっていますか？

PCでホームページを見る人よりもスマートフォンで見る人の方が多くなってきています。高額な野菜でも、リピーターになるタイプの方はやはりモバイルで選ぶ傾向です。
最近だとモバイルファーストが推奨されているので、現状でスマホページがあるところもおいおいはレスポンシブかあるいはまた別の手段になってくるかと思われます。

インクループのブログなんでちょっと営業させてくださいね。

＞https://service.incloop.com/

普通格安ホームページ作成だと5万スタートが多いのですが、だいたいどこもそれプラス上乗せがあるものです。ホームページの箱作成がこの値段だと思ったほうがいいのではないかなぁ、と……。

特に、普通の制作会社は「クライアントからヒアリングして情報を整理、分析、まとめあげてライティングする」ということはあまりしません。「何を載せたいですか」は聞いてくれますが、「どんなふうに載せたいですか」はクライアントの方の提供になります。

ホームページを作る時に何が一番大変なのか、というと、「見た目」よりも「中身」すなわち「コンテンツ」です。
コンテンツを構成するものは「図」「イラスト」「文章」「動画」「音声」といったものですが、これらはすべて「情報」で成り立っています。
情報をよりわかりやすく、質良く、的確にしようとすると、お値段があがります。さらにこの情報を斬新にしようとすると、さらにお値段があがります。見た目や方法にこだわるとさらにさらにさらにお値段があがります。

普通に「ちゃんとお客様に伝わるホームページを作りたい」と真剣に考えた場合、5万ではとてもできないわけですね。先の話で言えば、農業のプロとWebのプロがしっかりコミュニケートして、足並みをそろえて、互いにプロの仕事をしないと、「情報の提供」はできないのです。
インクループはこのスタンスです。よ。

話がそれましたがマルシェの食材はだいたいおいしい

ただね！　値段がね！　高いんですよ！

でも贈り物にはぴったりだな、と思いまして、「あのときのあのマルシェのお店！」ってなれたらいいのにな、と思ったわけです。やはり丁寧に作られた食材というのは、それなりに値段が張ってしかるべきもの。日常使いにはできないにしても、時々思い出して買う、くらいはできたらいいのになぁ、ともそもそ思います。

マルシェで買ったまいたけと昔の味たまごさんのところのたまごで作ったオムレツ。おいしかったです。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

日本マーケティング・リテラシー協会（JMLA）様のホームページを制作させていただきました。

https://www.marketing-literacy.org

日本マーケティング・リテラシー協会（JMLA）とは？

日本マーケティング・リテラシー協会（JMLA）は現代社会におけるマーケティング活動において、今までの概念では解決が難しい課題を解決するために調査研究を行い、様々な講座を開設し、 現代マーケティングにおける課題解決を出来る人材育成を通じ、産業、経済、文化に 広く貢献することを目的としています。

講座の一つであるマーケティング解析士認定講座は、定量情報と定性情報（特に感性情報）を組み合わせた体系的なメソッドを学び、「戦略の意思決定」を行えるスキルを習得し、「事業の成果」に結びつけることができる講座としてこれまでに1000人以上が受講し、資格を取得しているそうです。

スマートフォン対応

スマートフォン対応はレスポンシブWEBデザインで対応しています。
※インクループのWEBサイト制作はレスポンシブWEBデザイン標準対応です。

ファーストビューで更新が分かるように構成

パソコンやスマートフォンに表示される最初の画面のことをファーストビューといいますが、このファーストビューで更新された内容が分かるように構成しています。

ファーストビューで更新されていることが分かることで直帰率を下げる効果があります。

暗号化通信HTTPSにも対応

Googleが推奨しているHTTPS (Hypertext Transfer Protocol Secure) を用いた暗号化通信にも対応しています。
※インクループで2016年12月以降で新規制作したサイトは基本的に全てHTTPSに標準対応（追加費用なし）しています。

使用しているCMS

WordPress

制作期間について

ご依頼から納品まではトータルで約1ヶ月でした。

• 構成検討：約3日間
• デザイン：約3日間
• 実装：約10日間
• 確認・調整：約3日間

運用方針について

毎月1回のアクセス解析レポートを提出させていただいております。

Googleアナリティクスを用いたアクセス解析を基にして、アクセス数の増加はもちろん、ブログの投稿内容に関するアドバイスなどをサポートさせて頂いております。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

「いやめっちゃ楽ですよ。レスポンシブにかかる時間ホント減りましたもん」
「へー。ええやん。それウチの標準にしようよ」

というわけで勉強会を開いたら

「できるってこたぁわかった」
「なんとなくわかったような気がする」
「つかプロパティ多くね？」

となりました。プロパティに関しては完全同意なのですが、なんとなくわかったじゃ困るんですよ！
そんなわけで必死こいてこうだよっていうテキストを作りました。ご自由にお持ちください。

編集可能なaiデータ（IllustratorCC）、pdfデータが入っています。再配布は禁止であとはご自由にどうぞー。

flexboxテキスト

1 file(s)   1.85 MB

Download

特に当社の社員は必ずDLして覚えてください。お願いします。

レスポンシブ対応に最適なflexbox

レスポンシブデザインをデフォルトで行っているインクループでは、ちょっと前までfloatを使ったレイアウトをしておりました。IEの前のバージョンでの画面確認をするお客様が多かったからですね。ちょっと不安だったのですね。

ですが2017年4月11日にIE9もIE10も延長サポートが終了しました。
つまりIE9とかIE10は、これからとっても危険なブラウザになるということです。セキュリティに問題があっても修正されなくなるブラウザで、ウェブページを見たいという方はいらっしゃらないと思います。

なのでこれを境にCSSコードもしっかり基準を作らないと！　ということになったわけです。

flexboxはfloatでclearfixだのなんだのと考えていたdivのあれこれを、考えなくてもよくなるとっても素敵なプロパティです。
端的に言ってしまえば「ハコに突っ込んだアイテムは全部自動で整理します」機能。
ドラクエとかFFでも見かける「道具を整理する」の機能です。エクセレント。ついでに自分で並び替えもできる。パーフェクトです。
モンハンのダブルクロスも随分とアイテム登録がらくちんになって……おっとこれは別の話ですな！

ホームページをレスポンシブにする利点とは？

人口の60％がスマートフォンから検索している今現在、スマートフォンやタブレットのユーザー数は増加し続けています。特に20代から40代の利用率は平均73％で、これからも伸び続けていくだろうことが予測できます。（2016年総務省「情報通信白書平成28年度版」）
ターゲットの年齢層にもよりますが、レスポンシブあるいはスマートフォン対応のウェブサイトはこれから必須になっていくことでしょう。

レスポンシブデザインのウェブサイトは、多様なモバイルデバイスで自動的に最適なデザインを構成できる仕組みです。
小さな画面でストレスフリーな閲覧ができるようになる、ということは、ユーザーエクスペリエンスに非常に重要なことです。

flexboxでできる「順番の入れ替え」

flexboxは「コンテンツの並びを整理できる」他に「その順番を入れ替えることができる」というのが非常にフレキシブルで魅力的な機能です。これをやると「パソコンだとここ、スマホだとこっち」というレイアウトの入れ替えが簡単にできるのですね。

柔軟性のある導線づくりにflexboxはこれから必須となっていくかと思われます。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

ライブエステート様のホームページと不動産管理WEBシステムのスマホ対応を弊社にて実装させていただきました。

ライブエステートとは

香川県高松市で不動産賃貸を取り扱う地域密着の不動産会社です。
ホームページに力を入れており、物件の地域情報が細かく掲載されているため、情報量が充実したWebサイトになっております。
代表の関口様は不動産の”今”の情報を発信することに力を入れているため、ホームページは毎日更新されております。

ライブエステート様のホームページはこちらから！

ホームページをレスポンシブ化

ライブエステート様は既にホームページを運用しておりましたが、スマホに特化したサイト作りがしたいとの要望で弊社にお話を頂きました。
ホームページのデザインとしては、元のホームページから印象が大きく変わらないようなデザインで各ページを作成させていただきました。
完成したホームページのスマホ画面とPC画面は下図になります。

スマホ表示の際には「お問い合わせ」「電話」のアイコンをスマホ画面の下部に固定表示して、どんなページにいてもすぐに連絡ができるようにしました。

スマホ表示の際は、トップページには必要な項目のみを表示するようにしました。
スクロールが長くなる要素に関してはアイコン、別メニュー、別ページにまとめて、トップページをコンパクトに仕上げました。

スマホの開閉式のメニューはクリックすることでメニューを表示します。
・ヘッダーメニューの開閉

・物件検索メニューの開閉

各種ページも全てレスポンシブ化

トップページ以外のページも全てレスポンシブ化致しました。
・「会社概要」ページ

・「お部屋をお探しの方へ」ページ

更新情報をページの上部に表示

今までのサイトはホームページの更新情報がサイト訪問者に伝わりづらいデザインになっていました。
そのため、トップページの上部にホームページに関する更新情報と、物件に関する更新情報が表示されるようにしました。

どんな情報がいつ更新されたのか、またどんなページが更新されたのかがサイト訪問者にわかりやすくなりました。

画像スライダーで新着物件情報を掲載

訪問者に物件の画像から興味を持ってもらうために、画像スライダーを設置しました。
画像をクリックすると物件詳細ページへ飛ぶため、訪問者が興味を持ったらワンタッチで物件詳細のページへ誘導することができます。

オススメの賃貸情報をトップページに表示

更新情報の一覧とは別に、賃貸物件のブログ記事をサムネイル画像と共にリンクを設定して表示するコンテンツを作成しました。
ブログに投稿した物件情報をサムネイル画像を使用して表示することで、訪問者に視覚的なアプローチをします。

サイドバー等のバナーも新規で作成

サイドバー等のバナーはWebサイトに合うようなデザインに変更して、画像の大きさを統一して設置させていただきました。

物件一覧画面をレスポンシブ化

物件の一覧を表示するページをレスポンシブ化致しました。
スマホ表示の際にはフッターに電話のアイコンを常に表示して、メニューは開閉式で表示・非表示が切り替えられるようにしました。
また、スマホ表示の際には、PC画面で表示していたテーブルの項目を全て表示することは難しいため、必要最低限の項目だけを表示するようにしました。

物件詳細画面をレスポンシブ化

物件の詳細を表示するページをレスポンシブ化致しました。
スマホ表示の際にはフッターにお問い合わせと電話のアイコンを常に表示して、メニューは開閉式で表示・非表示が切り替えられるようにしました。

ライブエステート様では、物件によって登録している動画の種類が異なるため、動画の登録状況によってページの上位に表示されるアイコンの表示・非表示が切り替わるようにしました。
アイコンをクリックすると、登録されている動画の位置にページのスクロールが自動で飛ぶように設定されています。

制作期間について

構成検討：約3日
デザイン：約5日
実装：約7日間
確認・調整：約1日

お使いのシステムがスマホ対応しておらず、お困りの皆様へ

お使いの管理システムがスマホ対応していない場合でも、弊社にてスマホ対応を実現するお手伝いをすることができます。
スマホ対応をしている別のシステムに乗り換えることも一つの方法ではありますが、現在の使い慣れたシステムを変更するのはコストや手間の問題で難しいことです。
今回の例のように、弊社にてスマホ対応をお手伝いさせていただくことで、使い慣れたシステムを使い続けることができます。
お気軽にご相談ください。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

以前こんな記事を書きました。
WEBデザインをするツールとしてIllustratorとPhotoshopの違いを比較してみる

最近すっかりIllustratorでWEBデザインをするスタイルになって、そろそろこれが確立し始めているような気が！　していますので！
覚書も兼ねてオススメIllustratorのポイント11選です。相変わらずイラレラブ勢です。

IllustratorでWEBデザインを行うときの下準備

環境設定（ショートカット：Ctrl＋K/Command＋K）

• キー入力を1pxに
• 単位設定をすべてピクセルに
• データの復元はお好みで

新規ファイルの設定（ショートカット：Ctrl＋N/Command＋N）

新規ファイルを作成する場合はWeb設定を選びます。
詳細設定をクリックすると昔ながらのファイル設定が出てきます。
カラーモードはRGB、72ppiで製作すればだいたい何とかなります。プレビューモードは途中でも変更可能ですがお好みでデフォルトかピクセルを選びましょう。

ピクセルパーフェクトって何？

Illustratorはベクターですので、ピクセルよりももっと細やかな表現が可能なのですが、ディスプレイ上で表現するにピクセルよりも細かい表現などうろたえるのみになってしまいます。
ピクセルパーフェクトは、Illustrator上でもきっちりピクセルにフィックスしてくれる機能です。これで妙なズレもできない！

ちなみに新規ファイル作成の時に「Web」から作成を選ぶと、「ピクセルにスナップ」に自動的にチェックが入ります。これは「メニュー＞表示」から確認できます。
既存のものをピクセルパーフェクトにしたい場合（言い方としてはピクセル整合、とか、ピクセルにスナップ、もピクセルパーフェクトの範疇内ですね）は、対象のオブジェクトを選択したあと、右クリック＞ピクセルを最適化　を選びます。

ピクセル整合はできるオブジェクトとできないオブジェクトがありますので随時確認しながら作業しましょう。

ピクセルパーフェクトなアートの描画｜Adobeサポート

ピクセルパーフェクトが邪魔になることもある？

特に自由にイラストを描いていきたいときは、この「ピクセルにスナップ」というやつが非常に煩わしくなる時があります。私は曲線で表現していきたいときは、別ファイルに描いて、配置時に「ピクセルを最適化」しています。

線の設定

環境設定できちんと単位をピクセルに設定しておくと、線幅のスタートは1pxからになります。
線の位置を内側にしておきましょう。中央にすると0.5pxオブジェクトが大きくなっちゃいますからね！

プレビューについて

ピクセルプレビュー（ショートカット：Ctrl＋Alt＋Y/Command＋Alt＋Y　解除：Ctrl＋Shift＋Alt＋Y/Command＋Shift＋Alt＋Y）

表示＞ピクセルプレビューでピクセルが見えるようになります。拡大して確認してみましょう。

新規ファイル作成時にプレビューモードを「ピクセル」にしておくと、このピクセルプレビューがオンになった状態でファイルが生成されます。

アウトラインのプレビュー（ショートカット：Ctrl＋Y/Command＋Y　解除：Ctrl＋Y/Command＋Y）

Webデザインのみでなく、DTPなどにもよく使われますが、Illustratorにおけるパスのラインが見えるようになります。

レイヤーパネルの眼の部分をCtrlを押しながらクリックすると同様の表示になります。レイヤーごとにも可能です。

ルーラー（定規）の表示とガイドラインの作成

ルーラー（定規）の表示はショートカット：Ctrl＋R/Command＋Rで、解除も同様です。使い方はPhotoshopなどと一緒で、定規をクリック&ドラッグすると、縦線・横線のガイドラインを作成することができます。

シェイプツールなどでガイドを作成することもできます。画面の中で描画範囲を決めるときは非常に便利。ショートカット：Ctrl＋5/Command＋5。

カラーガイドによる色の置き換えとグローバルカラー

カラーガイド

イラストや図などの微細なカラー変化をしたい場合、細かいパーツをshiftを押しながら選択するのは苦痛極まりないので、カラーガイドを使います。オブジェクトを選択した状態でカラーガイドを出してみると、それぞれのカラーをどのように変えるかを選ぶことができます。
カラーガイドパレット：Shift+F3　表示＞カラーガイド

カラーグループ（カラーハーモニー）｜Adobeサポート

グローバルカラー

作成した色を多用する場合、色をグローバルカラーとして登録しておくことが可能です。汎用の、広域の色、ってことですね。

グローバルにチェックを入れておくと、スウォッチパネル上で色を変更したときに、同じ色がすべて変化します。
グローバルカラーにしてスウォッチパネルに登録するより前に同色で作っていたものは、デフォルトとして残ってしまいますので、後からいちいち色を登録したグローバルカラーで置き換えしなければならなくなりますので、先にグローバルカラーを作っておくと便利ですね。

なお、一気にグローバルカラーを適応したい場合は、グローバルカラーでないデフォルトの色を乗せたオブジェクトを選択したのち、選択＞共通＞カラー（塗りor線）を選ぶと便利です。

スウォッチの使用と作成｜Adobeサポート

段落スタイルで見出しやフォントのテンプレート化

同じく文字スタイルというのもあるのですが、段落スタイルの方が使い勝手がよいです。hで見出しを組むことが多いので、h1からh5くらいまで、あらかじめフォントサイズとフォントファミリー、カラーくらいは設定しておくと便利です。

文字スタイルと段落スタイル｜Adobeサポート

変形

しょっちゅう使います。基本的な使い方をおさらいしておきましょう。
「角を拡大・縮小」「線幅と効果を拡大縮小」にチェックを入れると、それぞれが比率を保ったまま拡大縮小します。線幅を変えたくない、とか、角の丸みはそのままで、といったときはチェックを外しておくのがベストです。

変形パネルの使い方（Illustrator CC）｜Adobeサポート

アセット

アセットあればもうスライスとかいらないんじゃないの？　なんて思っちゃいます。本当にスライスを作る機会が激減しました。
詳しくはこちら。

2016年6月20日のAdobeソフトアップデートで Illustratorに画像アセットが追加されました

アセットの収集と一括書き出し｜Adobeサポート

グラフィックスタイル

アピアランスで設定した、オブジェクトに適応するフィルターや、線や塗りの色、パターン、ブラシなどをひとまとめにして登録できます。WebデザインのみでなくDTPでもよく利用されるツールですね。

シンボル

画像やアイコン、イラストといった様々なオブジェクトの要素をひとまとめにして登録することができます。グラフィックスタイルと違って、もうすでに完成された形を登録しておくことになるので、ヘッダーやフッターをひとまとめにしてシンボル化しておくといいでしょう。
シンボルは、該当するシンボルをパレット上でダブルクリックorアートボード上のシンボルをダブルクリックで編集ができ、同じシンボルを使用している場合は変更がすべてに適応されます。

リンク

Illustratorで画像を配置したとき、画像にガイドカラーでばってんが描かれているとリンク画像です。ファイル＞配置　で出てくるダイアログで「リンク」にチェックを入れておくとこういった設定になります。
画像は「オリジナルを編集」することで、Photoshopで編集を行うことができます。リンクの更新は自動で行われますが、手動でも行うことができます。

ちなみにjpegなどの単独ファイルは、ペインタや他のソフトで開かれる場合があります。これはIllustratorのプログラムではなく、各OSで「jpegを開くソフトはPhotoshopだよ」という具合に指定してあげると、Illustratorの「オリジナルを編集」からPhotoshopに飛ぶようになります。

Illustratorでのワイヤーフレーム、およびデザインの書き出し方について

illustratorのデータはアートボードごとにpdfの書き出しが可能です。
別名で保存＞ファイルの種類：Adobe PDFにして、
「全て」をチェックする場合：すべてのアートボードを含む全画面のPDFが生成されます。
「範囲」をチェックする場合：各々アートボードごとに書き出しされます。数字をハイフンでつなぐと、数字の範囲内のアートボードを書き出し（1-5なら1、2、3、4、5のアートボード）カンマで区切ると指定されたアートボードを書き出します（2,5なら2と5のアートボード）合わせ技として1-5,8,12とすると、1から5のアートボードと、8と12のアートボードを書き出します。

長くなりましたね！皆様のよいWebデザインライフをお楽しみくださいませー！

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

この季節になると春のチラシやらなんやらで、ワンポイント的に大活躍するのが桜。とりあえず隙間は埋めとけ的にイラストやクリップアートでぽんぽん桜が咲くのですが、毎年思うのですが桜は咲いても花びら舞わないんですよね。
というもの桜の花びらというコアな素材がまずそこらに落ちていない。花びら自体個数の問題でいちいち描いていられない。

Photoshopでもできますが、やはり拡大縮小自由な状態で勝手にひらひらしてくれるのが一番です。デザイナーとして入稿するならPhotoshopよりもIllustratorのほうが変更修正しやすいですしね。

というわけでさくさく作っていきましょう。

あ、ロイヤリティフリーで配布していますのでどうぞ使ってやってください。

桜の花びらブラシ

1 file(s)   9.02 MB

Download

和風装飾きらきら素材

1 file(s)   1.82 MB

Download

Illustratorのブラシはグラデーションが使えない

だからPhotoshop使ってる！　という方は多いと思います。私もそうです。
でもやっぱりIllustratorでほしくなってしまったので、Illustratorでグラデーションを使わずにグラデーションを表現します。

アートボードサイズは1000ピクセル×1000ピクセルのRGBで作成しています。

これを

こうですな。

グラデーションは使えずとも、ブラシには透明度とブレンドツールが使えます。ちょっとデータ的には重たくなりますが、うまいこと作れば上手に作業が短縮できます。

散布ブラシの作り方

ブラシのパレットへ散らばせたい素材をドラッグアンドドロップすると、下図のようなダイアログが出てきます。

ひとまず散布させたい素材を全部パレットの上にのせてしまいましょう。乗せるとダイアログが出てきますので、「固定」項目を「ランダム」にセッティングしておきます。
ドラッグアンドドロップした素材のアイコンをダブルクリックすると、もう一度ダイアログが開いて再編集ができます。数値はこんな感じ。

適当にパスツールやペンツールで線を引いて、ブラシに収納した素材のアイコンをクリックすると、適用されます。
この花びら5枚が適用されるとこんな感じになります。

ちょっと景気よくひらひらさせてしまいましたかね……お好みで数値をいじってコントロールしてみてください。
全てのオブジェクトを選択したのち、「オブジェクト」から「アピアランスを分割」を適用すると、ブラシが分割されて一つ一つのパーツになります。たまに以下のように透明な四角に包まれることがありますが、

ダミーで適当にシェイプを使って、塗り、線ともにナシの状態から、「選択」＞「共通」＞「カラー（塗り）」を選ぶと、同じ設定のものが選択されるので消しやすいです。コレ結構いろんなところで応用ができるので、「選択」＞「共通」は覚えておくと大変らくちんです。
これを実写の写真に合わせるとこんな感じ。

まあまあです。

和風の四角いきらきらの装飾

和風のイラストやワンポイントでよくみられるあの四角いグラデーションがかかったキラキラ、名前なんていうんですかね。

あれがフリー素材のブラシであまり見受けられないのは、おそらくグラデーションが効かないからなのかなぁ、とか、かんたんに作れるんだからサボるな！　とか、そういうことなのかなぁと思うのですが、面倒なので作りました。
こんな感じです。

金銀の濃淡計4種類作ってます。

散布ブラシのパーツを組み合わせるときは5パターンを目安につくるといい

人は物事やパーツ、イラストなどを覚えるときに、3つを基準に多い少ないを判断するといいます。
「みんな言ってるよ！」のみんなはだいたい三人であることが多い、というのでわりと人のいう「みんな」って少なめなんですね。

なので、それ以上の数の中で、「ペアを作って覚えてしまうことができない奇数」を選択すると、5つが一番情報の散逸を見込める最小数値となります。

見せ方によってはこの5つも大変見やすく分かりやすい数なのですが、絵だったらこれくらいあるといいよね、みたいなイメージを持っているとちょっとだけ「うわあこぴぺしてるよ」から抜けられる……かも？

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

湘南村岡不動産株式会社様が利用している不動産管理WEBシステムのスマホ対応を担当いたしました。

湘南村岡不動産株式会社とは

湘南村岡不動産株式会社様は、藤沢市村岡地区周辺に特化した不動産会社です。
ホームページを閲覧するたびにトップページに新しいギミックが追加されている程に、ホームページの運用に力を入れている不動産会社様になります。

スタッフブログはほぼ毎日更新されており、地域に関するニュースが非常に多く発信されています。

湘南村岡不動産株式会社様のホームページはこちらから！

物件一覧画面をレスポンシブ化

物件一覧画面は、PCで閲覧した場合とスマホで閲覧した場合とで、下図のようにレイアウトを変更し、どちらのデバイスでも見易くしました。

元のページにはメニューがなかったため、メニューの設置を実装しました。
ブラウザとスマホで見たときに、メニューの見た目が変わるようにしています。

スマホで閲覧時には画面下部に常に電話をかけるためのボタンが表示されており、すぐに電話をかけることができます。

物件詳細画面をレスポンシブ化

物件詳細画面も物件一覧画面と同様にレスポンシブ化いたしました。

こちらも元のページにはメニューがなかったため、メニューの設置を実装しました。
ブラウザとスマホで見たときに、メニューの見た目が変わるようにしています。

スマホで閲覧時には画面下部に常に電話をかけるためのボタンと問い合わせの項目に自動でスクロールするボタンが表示されており、すぐに電話をかけたりお問い合わせに飛ぶことができます。

湘南村岡不動産株式会社様は不動産情報を掲載するサイトとは別に、地域情報を発信するサイトを運用しており、
地域情報を物件詳細にも表示したいとの要望を頂きましたので、下記のように地域情報を表示するようにしました。

お問い合わせページに関しても、レスポンシブ対応をしてほしいとの要望がございましたので、
下記のように物件詳細の中にお問い合わせのフォームを設置しました。

問い合わせフォームから確認画面、サンクスページへ遷移するのですが、そちらもレスポンシブ対応させていただきました。

制作期間について

構成検討：約4日
デザイン：約2日
実装：約3日間
確認・調整：約1日

お使いのシステムがスマホ対応しておらず、お困りの皆様へ

お使いの管理システムがスマホ対応していない場合でも、弊社にてスマホ対応を実現するお手伝いをすることができます。
スマホ対応をしている別のシステムに乗り換えることも一つの方法ではありますが、現在の使い慣れたシステムを変更するのはコストや手間の問題で難しいことです。
今回の例のように、弊社にてスマホ対応をお手伝いさせていただくことで、使い慣れたシステムを使い続けることができます。
お気軽にご相談ください。

制作費用について

今回の制作に関する費用はお問い合わせください。

この記事であなたの課題を解決することができましたか？

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。