マネーライフスタイリストの公式サイトは、淡いピンクの英字見出し、字間を広くとった明朝体、花や文具を写したやわらかな写真、白と淡いグレーの面を重ねた余白の多いレイアウトによって、お金の相談を身構えずに始められる空気をつくっているファイナンシャルプランナーのサイトです。女性に向けたサービスのサイトで上品さと親しみやすさを両立させたいとき、具体的な手がかりを多く見つけられる見本といえます。
この記事では、同サイトをWebデザインの見本として取り上げ、ファーストビュー、配色、書体、レイアウト、相談へ進むための導線を順に読み解きます。愛知で女性のライフプラン相談ができる相手を探している方や、相談業のサイトづくりを検討している方に向けて、画面から確かめられた工夫を紹介します。
マネーライフスタイリストはどんなサイトか
マネーライフスタイリストは、愛知県名古屋市を拠点に、愛知県と岐阜県、さらにオンラインで全国に向けて活動しているファイナンシャルプランナーのサイトです。ファイナンシャルプランナーとキャリアコンサルタントの肩書きを持つしまおか 美鈴様が、家計管理や貯蓄、資産運用について、一人ひとりの悩みや働き方に合わせた方法を提案しています。結婚や出産、配偶者の転居といった出来事で暮らしが変わりやすい女性の目線に立つことを、強みとして掲げている点も特徴です。
トップページは、マネーライフスタイリストの考え方と経歴を伝えるABOUT、サービス紹介、自己紹介、よくある質問、ご利用の流れ、お客様の声、Instagram、コンテンツ、問い合わせの順にブロックを縦へ積み重ねた構成です。多くのブロックの終わりには下層ページへ進むボタンが置かれ、トップページがサイト全体の目次の役割を果たしています。
やわらかな写真と英字のコピーで始まるファーストビュー
ファーストビューは、画面いっぱいの写真、中央に置いたコピー、写真の下端に重ねた帯という3つの要素で組み立てられています。ここでは、写真の見せ方、文字の置き方、ファーストビューのすぐ下に続く案内の順に確認します。
草原を歩く後ろ姿から切り替わるスライドショー
最初に目に入るのは、青空の下の草原を、大人2人と子どもが手をつないで歩いていく後ろ姿の写真です。顔を見せずに同じ方向を向く構図のため、見る人が自分や家族の姿を重ねやすく、これからの暮らしを考えるサイトの入口にふさわしい1枚になっています。
写真は1枚に固定されておらず、時間がたつと、笑顔の女性と小さな子どもを写した写真や、ペンと紙を大きく写した写真へ、重なり合うように切り替わります。切り替わるどの写真にも細かな網目状の模様がかけられており、色味が一段落ち着いて見えるうえ、上に載せた白い文字も読みやすく保たれています。
英字のメインコピーと明朝体の添え書き
写真の中央には、お金と暮らしの両方を支えることを英語で表したメインコピーが、細身のセリフ体で大きく置かれています。その下には、ファイナンシャルプランナーとキャリアコンサルタントを掛け合わせた肩書きと、お金と生き方のスタイリストとして暮らしを支えるという一文が、小さな明朝体で2つのまとまりに分けて添えられています。
英字で雰囲気を伝え、日本語で仕事の中身を補う役割分担がはっきりしているため、短い時間でも何のサイトなのかが分かります。コピーの背後にはごく細い白の円が描かれ、右端には縦向きのscrollの文字と細い線が添えられるなど、主張しすぎない装飾が下へ読み進めるきっかけをつくっています。
写真の下端にまたがる帯と開閉式の案内
写真の下端には、左端にピンクのMEDIAのラベルを付けた白い帯が、写真と下の余白にまたがるように重ねられています。メディア情報の更新を1行で知らせる欄で、右端には一覧へ進むview allのリンクが下線付きで置かれています。写真と本文の境目に帯を渡しているため、画面が上下で分断されず、視線が自然に次のブロックへ移ります。
その下には、細い灰色の線で囲んだ横長の枠があり、文部科学省と愛知県が定める家庭教育支援チームの登録団体であるなやっぽで、メンバーとして取り組んでいる活動が3行で示されています。枠をクリックすると下に広がってなやっぽのロゴを使った画像が現れ、右端の「＋」は「－」に変わります。信頼につながる情報をページの冒頭で見せながら、詳しい説明は読みたい人だけが開ける形にまとめた工夫です。
淡いピンクとグレーでまとめた配色
配色は、目印に使う淡いピンク、面と文字に使う白とグレー、写真が運ぶ差し色の3つに役割が分かれています。使う色を絞っているため、情報の多いトップページでも散らかった印象になりません。
見出しと導線をそろえる淡いピンク
アクセントには、やわらかな淡いピンクが使われています。各ブロックの英字見出しと日本語の小見出し、MEDIAのラベル、view moreやview allの文字と矢印、問い合わせ欄の背景、フッターのリンクまで、目印になる場所がすべてこの1色でそろえられています。
ピンクは甘くなりやすい色ですが、本文をグレー、背景を白と淡いグレーにしているため、全体は落ち着いた大人の印象にまとまっています。女性の目線を大切にするサービスらしいやさしさと、お金の話をする場としての信頼感が、同じ画面の中で釣り合っています。
白と淡いグレーの面で区切る背景
背景は白が基本で、ところどころに淡いグレーの長方形が敷かれています。ABOUTでは名前とメッセージの右側の背後に、自己紹介のブロックでは英字見出しの背後に縦長のグレーの面が置かれ、写真や文字と少しずらして重ねることで、平面の画面に奥行きが生まれています。
サービス紹介の一覧を載せたパネルや、お客様の声のブロック全体の背景にも、同じ系統のグレーが使われています。線で囲まずに面の色の違いだけでまとまりを示しているため、区切りが多くても画面が硬く見えません。
花や文具の写真が運ぶ差し色
目印の色をピンクに絞る一方で、写真には紫や濃いピンク、ベージュといった色が含まれています。サービス紹介の帯にはラベンダーと淡いピンクの紙、ご利用の流れの背景にはコーヒーとノートと濃いピンクの花、お客様の声には大理石の上の便箋とペンと封筒、Instagramの帯にはドライフラワーが写っています。
いずれも身の回りの小物を写した静かな写真で、色の変化を写真に任せることで、ページ全体の統一感を保ったまま単調さを避けています。コンテンツのカードでは、ニュースのラベルをピンク、コラムのラベルを緑の細い枠で示しており、ここでは色が記事の分類を見分ける目印として働いています。
英字のセリフ体と明朝体が生むトーン
書体の選び方も、サイトの上品でやさしい印象を支えています。見出しには決まった型があり、本文の組み方も最後まで変わらないため、どのブロックを読んでいても同じ調子が続きます。
英字、細い線、日本語を並べた見出しの型
各ブロックの見出しは、ABOUT、SERVICE、FAQといった英単語を細身のセリフ体で大きく置き、その横か下に細い横線を引いて、小さな日本語の見出しを続ける形でそろえられています。英字は画面の中でも特に大きく扱われていますが、線が細く色も淡いため、重たい印象はありません。
見出しの位置はブロックごとに変わり、ABOUTは中央寄り、サービス紹介は左、自己紹介は右、よくある質問は右寄りに置かれています。同じ型の見出しが左右に振れながら現れることで、縦に長いページにも心地よいリズムが生まれています。
字間を広げた明朝体の本文
本文は明朝体で組まれ、文字の間隔と行の間隔がゆったりととられています。文字の色は真っ黒ではなくグレーに抑えられているため、長めのメッセージや経歴も穏やかな調子で読み進められます。ABOUTの本文では、メッセージと経歴の小見出しだけを黒丸付きの太めの文字にして、読む位置の目印にしています。
ロゴも見出しと同じ系統のセリフ体で、ヘッダーでは写真の上に白く、フッターではピンクで置かれています。ロゴ、見出し、ボタンの文字が同じ雰囲気の書体でつながっているため、ページのどこを見てもひとつのブランドとして認識できます。
写真とパネルを重ねて奥行きを出すレイアウト
レイアウトの特徴は、写真、グレーの面、白いカードを少しずつずらして重ねる手法にあります。左右対称の整列を避けながらも余白を十分にとっているため、動きがありつつ落ち着いた画面に仕上がっています。
写真と文章を左右に分けたABOUT
ABOUTでは、左に笑顔の女性と小さな子どもを写した縦長の写真、右にしまおか 美鈴様の名前と肩書き、メッセージ、経歴を並べています。名前と肩書きはピンクの大きな文字で示され、続く本文はグレーの明朝体に切り替わるため、誰のサイトなのかがまず伝わり、そのあとで考え方を読める順序になっています。
経歴の欄では、三菱UFJ銀行で資産運用の担当として15年間勤めたことや、2020年にマネーライフスタイリストとしての活動を始めたことが紹介されています。愛知県経済産業局のあいちウーマノミクス推進事業ヒトハナに採択されたことや、子育て支援センターなど公的な機関での登壇、岐阜テレビや中日新聞、中部経済新聞、女性誌のCLASSY.やsteady.での掲載にも触れており、写真のやわらかさを経歴の具体性が支えています。
写真の帯にパネルを重ねたサービス紹介
サービス紹介では、ラベンダーを写した横長の写真の帯に、淡いグレーのパネルが下から重なるように配置されています。パネルの中には01から03の番号付きで、行政・自治体・企業様向け、学校・地域子育て支援団体様向け、個人のお客様向けの3つの入口が並び、ピンクの見出し、グレーの説明文、右端の矢印という同じ形が細い線で区切られて繰り返されます。
行政や企業に向けては、女性やママ、親子を対象にした講演や、育休中や子育て中の社員に向けた研修の企画を、学校や子育て支援団体に向けては、金融教育の講座や、子どもがお金と商売の基本を体験を通して学ぶイベントを、依頼に合わせて組み立てると案内されています。個人向けには、将来までの収支を目に見える形にするMYマネーライフシミュレーションの作成を軸に、家計の見直しを支える家計デトックスや、家計簿をつけなくてよいかんたん家計サポートといった、長く続く支援も用意されています。
2枚の縦長写真を段違いに置いた自己紹介
自己紹介のブロックでは、見出しを右側に寄せ、縦長のグレーの面に英字の一部が重なるように配置しています。左側には、月の名前が並ぶ透ける紙の上にピンクのバラを置いた写真と、白い服の女性が木の椅子に座ってピンクのノートを手にした写真の2枚が、上下に少しずらして並べられています。
2枚の写真の高さをそろえずに配置することで、整然と並べるよりも動きが生まれ、右側の見出しや案内文とのあいだに軽やかなリズムができています。案内文では、資格や経歴、これまでに登壇したセミナーを下層ページで紹介していることが短く伝えられています。
カードと写真を重ねたお客様の声
お客様の声のブロックは、淡いグレーの背景に白いカードを置き、その右端に大理石の上の便箋とペン、封筒を写した写真を重ねた構成です。写真がカードの端に少しかかるように配置されているため、紙を重ねたような立体感が生まれています。
便箋や封筒といった手紙を思わせる題材は、利用者から寄せられたメッセージを紹介するブロックの内容とよく合っています。写真の題材をブロックの役割に合わせて選んでいる点は、文章を読む前に内容を想像させる工夫として参考になります。
迷わず相談へ進める導線とボタン
相談を受ける仕事のサイトでは、読み手が話を聞いてみたいと感じたときに、次の行き先がすぐ見つかることが大切です。マネーライフスタイリストのサイトは、スクロールしても残るヘッダー、形をそろえたボタン、開閉式の質問、段階を示した流れの図を組み合わせて、問い合わせまでの道筋を整えています。
スクロールしても残るヘッダーとメニュー
ヘッダーには、左にロゴ、右に問い合わせページへ進むCONTACTの白いボタンと、細い2本線のメニューボタンが置かれています。ページを下へ読み進めてもヘッダーは画面の上部に残り、背後に半透明のグレーの帯が敷かれるため、写真の上でも白い背景の上でもロゴとボタンが埋もれません。画面の右下には、押すとページの先頭へ戻る上向きの矢印のボタンも現れます。
メニューボタンを押すと、画面の右側から白いパネルが開き、ABOUTからCONTACTまでの項目が2列で並びます。各項目はページ内の見出しと同じく、ピンクの英字、細い線、小さな日本語の組み合わせで表示され、セミナーやアクセスのように、トップページには見出しのない項目も含まれています。パネルの外側は暗く沈み、右上の細い線で描いた×印で閉じられるため、メニューを選ぶ操作に集中できます。
丸い矢印でそろえたボタン
ブロックの終わりに置かれたボタンは、ピンクのview moreやview allの文字と、細い線で描いた円の中に矢印を収めた丸いボタンの組み合わせで統一されています。ご利用の流れやInstagramのように暗い写真を背景にした帯では、同じ形のまま文字と線を白に切り替えています。
ボタンの形が1種類に絞られているため、読み手は一度覚えた形を手がかりに、どのブロックからでも詳しいページへ進めます。塗りつぶしのボタンを使わずに線だけで描いているので、導線を示しながらも画面の軽やかさが損なわれていません。
開閉式のよくある質問と3段階の流れ
よくある質問では、セリフ体のQ.の記号に続けて質問文だけが並び、右端には「＋」が置かれています。質問をクリックするとすぐ下に回答が開き、記号が「－」に変わる仕組みです。トップページでは、相談にかかる時間、知識がなくても相談できるか、相談の場所という3つの質問が選ばれており、初めての人が抱きやすい疑問に先回りしています。
続くご利用の流れは、コーヒーや花を写した暗い写真の上に、01から03の番号を付けた半透明の3つの箱を横に並べたデザインです。問い合わせ、必要書類の準備、相談当日という3つの段階だけを大きく示し、細かな説明は下層ページに任せているため、相談までの道のりを短く感じられます。
横に送るコンテンツのカードとピンクの問い合わせ欄
コンテンツのブロックでは、写真の下部に半透明の濃いグレーの帯を重ね、白い文字で記事のタイトルを載せたカードが横一列に並びます。カードはドラッグで横に送ることができ、下に引かれたバーの濃い部分が、いまどのあたりを見ているかを示します。右端のカードが画面の端で切れて見えるため、続きがあることも自然に伝わります。取り上げられているコラムには、女性にライフプランが必要な理由や、自分に合った家計管理の方法、女性が知っておきたい社会制度や税金といったテーマが並んでいます。
ページの終盤には、画面の幅いっぱいに近いピンクの面を敷いた問い合わせ欄があり、白いCONTACTの見出しの下に、お問い合わせフォームと書かれた白い横長のボタンが置かれています。その下のフッターにはピンクの文字で各ページへのリンクが並び、所在地の愛知県名古屋市と、Instagram、LINE、noteのQRコードが添えられています。パソコンで見ている人も手元のスマートフォンで読み取ればSNSへ移れるため、閲覧の環境を問わずつながりを保てる入口になっています。
愛知で女性がライフプランを相談するときに確かめたいこと
ここまではデザインを中心に見てきましたが、サイトを相談先選びの情報源として読むときの視点にも触れておきます。ライフプランとは、結婚や出産、住まい、子どもの進学、働き方の変化、老後といったこれからの出来事を時間の流れに沿って整理し、それぞれに備えるための計画のことです。
女性は、出産や育児、配偶者の転居などをきっかけに働き方や収入が変わる場面が多く、一度立てた計画も見直しが必要になりやすいといわれます。愛知県内で相談先を探すときは、次のような点を押さえておくと、限られた時間でも話を深めやすくなります。
相談の前に整理しておきたいこと
相談の場では、細かな数字よりも、どんな暮らしをしたいのかという方向性が話の出発点になります。事前に次のような点を書き出しておくと、相談の中身が具体的になります。
- これから実現したい暮らしや働き方のイメージを、短い言葉にしておきます。
- 家族の構成と、数年のうちに控えている出来事を確かめておきます。
- 毎月の収入と支出のおおまかな流れを、分かる範囲でまとめておきます。
- 加入している保険や預貯金、積み立ての状況を確認しておきます。
- いちばん不安に感じていることと、相談したい内容の優先順位を決めておきます。
マネーライフスタイリストのよくある質問では、何から相談すればよいか分からない段階でも相談できると答えており、子どもの教育資金や老後の資金の準備、銀行に預けたままのお金の活かし方、加入中の保険が自分に合っているかといった相談の例も挙げられています。ご利用の流れのページでは、必要な書類を事前に案内したうえで相談当日を迎える手順が示されているため、準備に迷ったときも相談先に確かめながら進められます。
相談の形と相手の選び方
相談の形には、相談先へ出向く対面、自宅や近くの施設で会う出張、ビデオ通話を使うオンラインなどがあります。小さな子どもがいて外出しにくい方や、仕事で日中の時間をとりにくい方は、場所と時間帯の選択肢がどれだけあるかを確かめておくと安心です。あわせて、専門的な言葉をかみくだいて説明してくれるか、一度で終わらず見直しまで付き合ってくれるかも、相手を選ぶ手がかりになります。
マネーライフスタイリストでは、愛知県と岐阜県での相談に出張で対応しており、10時から16時の時間帯で、カフェや公共施設、会議室のほか、女性の場合は自宅も相談場所に選べると案内されています。Zoomなどを使ったオンラインの面談にも対応し、仕事や子育ての都合で夜の時間を希望する場合も相談できるとしています。
1回の相談はおよそ1時間半で、要望に合わせて複数回に分けて進め、小さな子どもがいる場合は短い時間で組み立てると説明されています。子育て中の方にとっては、相談先を選ぶ前に確かめておきたい情報です。
まとめ：マネーライフスタイリストのデザインの見どころ
マネーライフスタイリストのサイトは、淡いピンクの英字見出し、グレーで組んだ明朝体の本文、花や文具を写した静かな写真、少しずらして重ねた白とグレーの面によって、お金の相談を身近に感じさせる上品な画面をつくっています。網目状の模様をかけたスライドショーや、写真の下端にまたがる帯、段違いに置いた写真といった細部の演出も、全体のトーンからはみ出していません。
スクロールしても残るヘッダーと右から開くメニュー、丸い矢印でそろえたボタン、開閉式のよくある質問、3段階で示したご利用の流れ、ピンクの面で目立たせた問い合わせ欄という導線の組み立ては、ファイナンシャルプランナーやカウンセラーなど、相談を仕事にするサイトにそのまま応用できます。やわらかな色づかいのなかで、読みやすさと行き先の分かりやすさを両立させたい場合にも参考になる見本です。
写真の切り替わりやカードの動き、各ブロックの詳しい内容は、実際のサイトで確かめるとより伝わります。相談の場所や進め方を詳しく知りたい方は、愛知で女性のライフプランを相談できるマネーライフスタイリストの公式サイトをご覧ください。
