WEB and GRAPHIC
CREATIBE STUDIO
© COPYRIGHT MGM DESIGN TIPS ALL RIGHTS RESERVED.
PARTS iris
SIMPLE NOTE(シンプルノート)のデザインにおいて最大の特徴は、これまでの家に比べて視覚的要素が圧倒的に少なく、シンプルなデザインになっていることです。
快適さや暮らしやすさを保ちながら、不要なものを取り除いていき、シンプルですっきりしたデザインを生み出していくのです。
重要なのは、「どうシンプルなのか」ではなく、「なぜシンプルなのか」です。
デザイナーズ住宅とは、デザイナーが気のままにデザインしたものを言うのではなく、問題点を解決しながら、合理的で住みやすくする事がデザインだと思っています。
余計なものをそぎ落とした結果が負担を減らす事につながり、家を建てる本来の目的を実現できるのです。
開放感と外からの視線、その決して共存できない2つをSIMPLE NOTEの『工夫』が解決します!
SIMPLE NOTEでは、外からの視線が入り込む道路面や隣接する家がある方向に、むやみに大きな窓を作ることはしません。そうすることで、外からの視線を気にすることがなくなり、同時にカーテンや雨戸の出費を抑えます。
SIMPLE NOTEの設計は、その名の通り家族の生活動線をできる限りシンプルになるよう工夫しています。生活の中心であるリビングと子供部屋の動線が限りなく近いことで、子供のものを子供部屋にしっかり収納できるようになり、またパントリーや土間収納もリビング近辺にあるため、リビングをいつもスッキリとキレイに保つことが可能となります。
土地というものは人気があればあるほど価格が高くなるものです。したがって、すべての要望を満たそうとすると高額になり、手に入れづらくなります。
夢のマイホーム計画を家族で話し合い行動すると、最初にぶつかる壁が「希望する土地が見つからない・・・」という土地に関する問題ではないでしょうか。
その不安を取り除くのがSIMPLE NOTEです。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="container2"> <div class="ti_post res_mb"> <div class="row"> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple01.jpg" alt="" /></div> <h2 class="ti_count">カッコいい≠住みにくい</h2> <p class="ti_txt">SIMPLE NOTE(シンプルノート)のデザインにおいて最大の特徴は、これまでの家に比べて視覚的要素が圧倒的に少なく、シンプルなデザインになっていることです。<br />快適さや暮らしやすさを保ちながら、不要なものを取り除いていき、シンプルですっきりしたデザインを生み出していくのです。<br />重要なのは、「どうシンプルなのか」ではなく、「なぜシンプルなのか」です。</p> </div> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple02.jpg" alt="" /></div> <h2 class="ti_count">デザイナーズ住宅≠高い</h2> <p class="ti_txt">デザイナーズ住宅とは、デザイナーが気のままにデザインしたものを言うのではなく、問題点を解決しながら、合理的で住みやすくする事がデザインだと思っています。<br />余計なものをそぎ落とした結果が負担を減らす事につながり、家を建てる本来の目的を実現できるのです。</p> </div> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple03.jpg" alt="" /></div> <h2 class="ti_count">開放感≠外からの視線</h2> <p class="ti_txt">開放感と外からの視線、その決して共存できない2つをSIMPLE NOTEの『工夫』が解決します!<br />SIMPLE NOTEでは、外からの視線が入り込む道路面や隣接する家がある方向に、むやみに大きな窓を作ることはしません。そうすることで、外からの視線を気にすることがなくなり、同時にカーテンや雨戸の出費を抑えます。</p> </div> <div class="col-12 col-md-6 col-xl-4 offset-xl-2 m40-bottom"> <div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple04.jpg" alt="" /></div> <h2 class="ti_count">子育て ≠ 散らかる</h2> <p class="ti_txt">SIMPLE NOTEの設計は、その名の通り家族の生活動線をできる限りシンプルになるよう工夫しています。生活の中心であるリビングと子供部屋の動線が限りなく近いことで、子供のものを子供部屋にしっかり収納できるようになり、またパントリーや土間収納もリビング近辺にあるため、リビングをいつもスッキリとキレイに保つことが可能となります。</p> </div> <div class="col-12 col-md-6 offset-md-3 col-xl-4 offset-xl-0"> <div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple05.jpg" alt="" /></div> <h2 class="ti_count">日当たりの悪い土地 ≠ 暗い</h2> <p class="ti_txt">土地というものは人気があればあるほど価格が高くなるものです。したがって、すべての要望を満たそうとすると高額になり、手に入れづらくなります。<br />夢のマイホーム計画を家族で話し合い行動すると、最初にぶつかる壁が「希望する土地が見つからない・・・」という土地に関する問題ではないでしょうか。</p> <p class="ti_txt">その不安を取り除くのがSIMPLE NOTEです。</p> </div> </div> </div> </div> |
991px以下「4rem」992px以上「6rem」1200px以上「8rem」になります
html
1 |
<div class="res_mb">画面サイズによって下のマージンが変わります。</div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.res_mb{ margin-bottom: 4rem; } @media screen and (min-width: 992px){ .res_mb{ margin-bottom: 6rem; } } @media screen and (min-width: 1200px){ .res_mb{ margin-bottom: 8rem; } } |
画像上部を屋根のような形に切り抜きます。
html
1 |
<div class="img-cutout"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simple01.jpg" alt="" /></div> |
css
1 2 3 4 5 |
.img-cutout{ -webkit-clip-path:polygon(70% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%); clip-path:polygon(70% 0%, 100% 20%, 100% 100%, 0 100%, 0% 20%); overflow: hidden; } |
カウンター参考:https://dezanari.com/css-counter/
見出しの数字を自動でカウントします。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="ti_post"> <div class="row"> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <h2 class="ti_count">カッコいい≠住みにくい</h2> </div> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <h2 class="ti_count">デザイナーズ住宅≠高い</h2> </div> <div class="col-12 col-md-6 col-xl-4 m40-bottom"> <h2 class="ti_count">開放感≠外からの視線</h2> </div> </div> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.ti_post{ counter-reset: ticount;/*カウンターリセット全てのカウンターを含む親要素に任意の名前を指定*/ } .ti_count{ font-weight: bold; font-size: 1.4rem; padding-left: 3rem; position: relative; line-height: 1.7; margin-top: 0.8rem; margin-bottom: 0.4rem; } .ti_count::before{ content: counter(ticount);/*カウンターにしたい要素に先程の名前を指定*/ counter-increment: ticount;/*カウンターの値を1ずつ増やすプロパティ*/ background-color: #000; color: #fff; font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */ text-align: center; display: block; position: absolute; top: 0; left: 0; width: 2.3rem; } @media screen and (min-width: 1200px){ .ti_count{ font-size: 2rem; padding-left: 4rem; margin-top: 1.5rem; margin-bottom: 1.1rem; } .ti_count::before{ width: 3.3rem; } } |
通常
SIMPLE NOTE(シンプルノート)のデザインにおいて最大の特徴は、これまでの家に比べて視覚的要素が圧倒的に少なく、シンプルなデザインになっていることです。
快適さや暮らしやすさを保ちながら、不要なものを取り除いていき、シンプルですっきりしたデザインを生み出していくのです。
重要なのは、「どうシンプルなのか」ではなく、「なぜシンプルなのか」です。
行間高め
SIMPLE NOTE(シンプルノート)のデザインにおいて最大の特徴は、これまでの家に比べて視覚的要素が圧倒的に少なく、シンプルなデザインになっていることです。
快適さや暮らしやすさを保ちながら、不要なものを取り除いていき、シンプルですっきりしたデザインを生み出していくのです。
重要なのは、「どうシンプルなのか」ではなく、「なぜシンプルなのか」です。
html
1 |
<p class="ti_txt">SIMPLE NOTE(シンプルノート)のデザインにおいて最大の特徴は、これまでの家に比べて視覚的要素が圧倒的に少なく、シンプルなデザインになっていることです。<br />快適さや暮らしやすさを保ちながら、不要なものを取り除いていき、シンプルですっきりしたデザインを生み出していくのです。<br />重要なのは、「どうシンプルなのか」ではなく、「なぜシンプルなのか」です。</p> |
css
1 2 3 |
.ti_txt{ line-height: 2; } |
メインとサムネイルの画像が連動します。
使用する際には対応するjsを読み込んでください。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="res_mb"> <ul class="slider ti-item"> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0002.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0003.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0004.jpg" alt="" /></li> </ul> <div class="container"> <div class="row"> <div class="col-md-12"> <ul class="slider ti-item-nav"> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0001.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0002.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0003.jpg" alt="" /></li> <li><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/0004.jpg" alt="" /></li> </ul> </div> </div> </div> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/*メイン*/ .ti-item{ width: 100%; margin-bottom: 1rem; } @media screen and (min-width: 576px){ .ti-item{ margin-bottom: 2rem; } .ti-item li{ margin-right: 1rem; margin-left: 1rem; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .ti-item li.slick-center{ -webkit-filter: grayscale(0); filter: grayscale(0); } } @media screen and (min-width: 1200px){ .ti-item{ margin-bottom: 2.5rem; } .ti-item li{ margin-right: 2.5rem; margin-left: 2.5rem; } } /*サムネイル*/ .ti-item-nav li{ margin-right: 0.5rem; margin-left: 0.5rem; } @media screen and (min-width: 768px){ .ti-item-nav li{ margin-right: 0.8rem; margin-bottom: 0.8rem; } } |
背景色があり、その中の画像とテキストが重なります。
テキスト側には白い背景色。
画像を左側に配置するときは「tib_box」に「tib_l」のクラス
画像を右側に配置するときは「tib_box」に「tib_r」のクラス
画像は「tib_box」直下のspanで指定しています。クラス名で背景画像指定。
子どもの将来、
子ども部屋の将来
「人数に応じた子ども部屋」「来客に備えて1部屋余分に」という固定観念に囚われて さえいなければ、もっとLDKを広々と設計することができたかもしれませんし、家全 体の床面積を削ることで階段を上り下りせずゆったりと暮らせる平屋にできたかもし れません。
子どもが自室で一人で寝る期間は思ったほど長くありませんし、年間を通して来客が 泊まる機会もそれほど多くはないのではありませんか。それならば子どもが小さいうち は子ども部屋を来客用として使えば、来客専用の部屋を作らずに済みます。
そんなふうに「当たり前」と思っていることをひとつずつ見直して、もっと広く、シン プルな家を建てることができるのは、“SIMPLE NOTE”で家づくりを進めていく人だけ が得られる特権なのです。
1000万円台で叶う
高性能デザイナーズ住宅。
デザイナーズ住宅は高い。
このようなイメージをお持ちの方も多いのではないでしょうか。デザインという価値を付け加えるために無駄な装飾や設計を加算したり、建築家が作品づくりに傾倒することにより価格が上がります。したがって、「デザイナーズ住宅は高い!」となるわけです。
デザイナーズ住宅とは、デザイナーが気のままにデザインしたものを言うのではなく、問題点を解決しながら、合理的で住みやすさを追求した住宅であると考えます。余計なものをそぎ落とした結果が負担を減らす事に繋がり、家を建てる本来の目的を実現できるのです。デザイン、コスト、あらゆる無駄を省いたSIMPLE NOTEを体験してみませんか?
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="ti_bgco res_mb"> <div class="tib_box tib_l"> <span class="ti_b1"></span> <div class="tib_bgw"> <p class="tib_ttl">子どもの将来、<br class="br-sp">子ども部屋の将来</p> <p class="ti_txt">「人数に応じた子ども部屋」「来客に備えて1部屋余分に」という固定観念に囚われて さえいなければ、もっとLDKを広々と設計することができたかもしれませんし、家全 体の床面積を削ることで階段を上り下りせず<strong>ゆったりと暮らせる平屋</strong>にできたかもし れません。</p> <p class="ti_txt">子どもが自室で一人で寝る期間は思ったほど長くありませんし、年間を通して来客が 泊まる機会もそれほど多くはないのではありませんか。それならば子どもが小さいうち は子ども部屋を来客用として使えば、来客専用の部屋を作らずに済みます。</p> <p class="ti_txt">そんなふうに「当たり前」と思っていることをひとつずつ見直して、<strong>もっと広く、シン プルな家を建てることができるのは、“SIMPLE NOTE”</strong>で家づくりを進めていく人だけ が得られる特権なのです。</p> </div> </div> <div class="tib_box tib_r"> <span class="ti_b2"></span> <div class="tib_bgw"> <p class="tib_ttl">1000万円台で叶う<br class="br-sp">高性能デザイナーズ住宅。</p> <p class="ti_txt">デザイナーズ住宅は高い。</p> <p class="ti_txt">このようなイメージをお持ちの方も多いのではないでしょうか。デザインという価値を付け加えるために無駄な装飾や設計を加算したり、建築家が作品づくりに傾倒することにより価格が上がります。したがって、「デザイナーズ住宅は高い!」となるわけです。</p> <p class="ti_txt">デザイナーズ住宅とは、デザイナーが気のままにデザインしたものを言うのではなく、問題点を解決しながら、合理的で住みやすさを追求した住宅であると考えます。余計なものをそぎ落とした結果が負担を減らす事に繋がり、家を建てる本来の目的を実現できるのです。デザイン、コスト、あらゆる無駄を省いたSIMPLE NOTEを体験してみませんか?</p> </div> </div> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
/*共通*/ .ti_bgco{ background-color: #ececec; padding-top: 3rem; } .tib_box{ width: 100%; position: relative; padding-top: 250px; padding-bottom: 3rem; } .tib_box>span{ top: 0; width: 90%; display: block; position: absolute; min-height: 250px; background-repeat: no-repeat; background-position: center; background-size: cover; } .tib_bgw{ background-color: #fff; padding: 5%; width: 90%; margin-left: auto; margin-right: auto; position: relative; } .tib_ttl{ font-size: 1.6rem; font-weight: bold; line-height: 1.5; padding-top: 0.7rem; bottom: 1.2rem; } @media screen and (min-width: 768px){ .ti_bgco{ padding-right: 5%; padding-left: 5%; } .tib_box>span{ width: 85%; min-height: 300px; } .tib_bgw{ width: 85%; } } @media screen and (min-width: 992px){ .ti_bgco{ padding-top: 7rem; padding-right: 10%; padding-left: 10%; } .tib_box{ padding-bottom: 7rem; } } @media screen and (min-width: 1200px){ .tib_box>span{ height: 90%; max-height: 550px; width: 50%; } .tib_box{ padding-top: 7rem; } .tib_bgw{ max-width: 830px; } .tib_ttl{ font-size: 2rem; margin-bottom: 2.2rem; } } /*画像右配置*/ .tib_r>span{ right: 0; } @media screen and (min-width: 768px){ .tib_r>span{ margin-right: 0; } .tib_r>.tib_bgw{ margin-right: auto; margin-left: 0; } } /*画像左配置*/ .tib_l>span{ left: 0; } @media screen and (min-width: 768px){ .tib_l>span{ margin-left: 0; } .tib_l>.tib_bgw{ margin-left: auto; margin-right: 0; } } /*画像指定*/ .ti_b1{ background-image: url("../images/page/ti_b01.jpg"); } .ti_b2{ background-image: url("../images/page/ti_b02.jpg"); } |
家づくりにおいて知らなければならない事は沢山あります。家族の大切なお金を出して、人生をかけて支払いしていく家づくりにおいて無頓着では済まされない事柄を6つ挙げてみましたので、家づくりの前に必ずお読みいただき、今後の家づくりに役立ててみて下さい。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div class="container"> <div class="row res_mb"> <div class="col-md-8 offset-md-2 col-lg-12 offset-lg-0"> <div class="row"> <div class="col-12 col-lg-6"> <div class="ti_logo"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simplenote_logo.svg" alt="SIMPLE NOTE" /></div> <h2 class="ti_ltit"><span>シンプルな家づくりのための</span>6つのアドバイス</h2> <p class="ti_txt">家づくりにおいて知らなければならない事は沢山あります。家族の大切なお金を出して、人生をかけて支払いしていく家づくりにおいて無頓着では済まされない事柄を6つ挙げてみましたので、家づくりの前に必ずお読みいただき、今後の家づくりに役立ててみて下さい。</p> </div> <div class="col-12 col-lg-6"> <div class="ti_checkbox"> <ul class="ti_check_inner"> <li>洗練されたデザイナーズ住宅</li> <li>合理的な設計がもたらす高性能住宅</li> <li>子育てママの家事をラクにする思いやりの家</li> <li>家族の安全やプライバシーを守る防犯住宅</li> <li>無駄なコストを省いた賢い家</li> <li>人に自慢したくなるようなセンスの良い個性的な家</li> </ul> </div> </div> </div> </div> </div> </div> |
svgに対応可能なプラグインを入れたのでWordPressにsvg画像をアップロードできます。
プラグインが入っていない場合は、FTPから画像をアップするかプラグインを入れてください。
今回のsvg画像は幅の最大値を500pxにしています。
500px以下にはなりますが、500px以上にはなりません。
html
1 |
<div class="ti_logo"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/07/simplenote_logo.svg" alt="SIMPLE NOTE" /></div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 |
/*logo*/ .ti_logo{ width: 100%; max-width: 500px; margin-right: auto; margin-left: auto; } @media screen and (min-width: 992px){ .ti_logo{ margin-top: 2rem; } } |
コンセプト用のタイトルです。
brタグが入っていないのにスマホでは改行しています。
991px以下では中の「span」をブロック要素に、992px以上ではインライン要素にしているためです。
html
1 |
<h2 class="ti_ltit"><span>シンプルな家づくりのための</span>6つのアドバイス</h2> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/*title*/ .ti_ltit{ font-weight: bold; font-size: 1.4rem; margin-top: 1.5rem; margin-bottom: 0.8rem; line-height: 1.6; text-align: center; } .ti_ltit span{ display: block; } @media screen and (min-width: 992px){ .ti_ltit{ margin-top: 2.5rem; margin-bottom: 1.8rem; } .ti_ltit span{ display: inline; } } |
リストのアイコンは背景画像です。
勝手に右に寄っていますが、今回のレイアウトの都合上リストの左側に間を空けたかったので、
1200px以上では幅の最大値を500pxにして左のマージンをオートにしているためです。
必要に応じて変更していただければ大丈夫かと思います。
html
1 2 3 4 5 6 7 8 9 10 |
<div class="ti_checkbox"> <ul class="ti_check_inner"> <li>洗練されたデザイナーズ住宅</li> <li>合理的な設計がもたらす高性能住宅</li> <li>子育てママの家事をラクにする思いやりの家</li> <li>家族の安全やプライバシーを守る防犯住宅</li> <li>無駄なコストを省いた賢い家</li> <li>人に自慢したくなるようなセンスの良い個性的な家</li> </ul> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/*list*/ .ti_checkbox{ background-image: url("../images/slash.gif"); background-repeat: repeat; padding: 5px; } .ti_check_inner{ padding: 5%; margin-bottom: 0; background-color: #fff; } .ti_check_inner li{ list-style: none; background-image: url("../images/page/si_logoicon.svg"); background-repeat: no-repeat; background-position: center left; margin-bottom: 1rem; background-size: 4px; padding-left: 12px; font-size: 0.8rem; } .ti_check_inner li:last-child{ margin-bottom: 0; } @media screen and (min-width: 768px){ .ti_check_inner li{ font-size: 1.1rem; margin-bottom: 1.2rem; background-size: 6px; padding-left: 20px; } } @media screen and (min-width: 1200px){ .ti_checkbox{ max-width: 500px; margin-left: auto; } .ti_check_inner{ padding: 7%; } } |
住宅を購入する際に、必ず必要となってくるもの・・・それが『土地』なわけですが、すでに土地をお持ちの方を除くと、すべての方が今後数十年と生活をしていく起点となる土地を探し、決めなければなりません。
その重要な起点となる土地探しに、もし失敗してしまったら・・・
考えるだけで恐ろしいことになるでしょう。
なぜならば、家具や模様替えなどによってイメージや機能を変えることのできる家と違って、土地は一度決めてしまってからでは、その土地を動かすこともできないし、形を変えることもできないからです。
土地を決めるということは、まさに一生付き合っていくパートナーを決めるようなものかもしれません。
しかし、土地探しに十分に満足し、成功したと思っている住宅購入者が驚くほど少ないのも現実です。
どんなに理想的な住宅を建てたとしても、その建物の下にある土地に不満を持ってしまっては、家づくりに成功したとは言えず、後悔してしまうかもしれません。
では、失敗しない賢い土地探しをするために、必要なものは一体なんなのか。
そのポイントをいくつかお伝えします。
1. 土地に『良い』も『悪い』もない
一般的に土地の良し悪しを図る材料として、大きさ、形、位置(日当たり)、高低差、駅からの距離、近隣施設、学区などがあります。
多くの人が、できるだけ大きな土地で、形がよく、南側道路の日当たりの良い土地で、高低差が無く平らで、駅からの距離も近く、近隣にはスーパーやコンビニがあり、そして希望の学区内・・・そんな土地を希望することと思います。
では、もしそのような土地に巡り合えたら、土地探しは成功するのか??
というと、そうはなりません。何故かというと、そのような理想的な土地は、驚くほど高額だからです。
土地の価格というのは、一般的には路線価と面積、そして地面の状況などによって決まると言われていますが、実はもっとわかりやすいパロメーターがあるのです。
それは、、、『人気』です。
欲しがる人が多ければ多いほど、土地の価格は高くなり、欲しがる人が少なければ安くなります。
例えば、非常に条件の良い土地であっても、その土地近辺で悲惨な事件が起こったとすると、欲しがる人が少なくなり、結果土地自体は全く変わっていないのに、価格が安くなったりするのです。
先程の土地を見てみましょう。
良い条件をすべて満たしている土地であれば、大半の方が欲しがることでしょう。結果、非常に高い土地となり、予算の多くを占めてしまう可能性があります。
どんなに条件の良い土地を手に入れることができたとしても、そのせいで予算が厳しくなり、結果、家を妥協せざるを得なくなるかもしれません。
もしくは、予定より多くの住宅ローンを組むことになり、日々の生活が苦しくなるかもしれません。
家づくりは土地だけではありません。その上に家族の希望を満たす家が建ち、そして日々の生活にゆとりを持った支払いができる資金計画を立てることが必要です。
2. 建物と土地をセットで考える
土地の価格のカラクリを把握した上で次にやるべきこと、それは「どの条件を外していくか」です。すべての条件を満たそうとすると高額になってしまい、条件をひとつ外していくと、その分だけ安くなっていくと考えましょう。
そうすると、多くの方が「妥協」しなければいけないのかと思われることでしょう。そうではありません。
学区や駅からの距離など、外部要因の条件は別として、土地自体の条件、例えば大きさや形、位置などは、条件が悪いからといって必ずしもマイナスになるとは限りません。
例えば、高低差のある土地であっても設計次第では、その高低差をうまく活かして、平な土地では決してできないような個性的なプランを可能にすることもあれば、北側道路の一般的には日当たりの悪いと言われている土地であっても、設計次第では、吹き抜けや中庭を組み込むことによって四方から光を取り込む明るい家にすることも可能です。
つまり、土地は設計次第で良くも悪くもなるのです。
どのような建物にするのか、それを決めながら土地を探すと、条件は悪くとも理想的な土地に出会える可能性が増えていきます。
3. まずは資金計画から
土地探しにおけるよくある失敗事例として、土地にお金を掛けすぎてしまうことが挙げられます。良い土地を探し回った結果、条件は良いが高額な土地を購入してしまい、建物の予算を大幅に削ってしまうことになります。
特に、土地購入時には、不動産情報に載っている価格以外に、必要なお金もあります。
これらをしっかりと把握して土地を購入しないと、その分のしわ寄せが建物自体やその後の生活に圧し掛かってくることになります。
まずは、しっかしと資金計画を立て、いくらまでの土地であれば、建物にある程度の希望を叶えながら十分に支払っていけるのかを把握することが重要です。
家づくりは計画をスタートしてからお引渡しというゴールに行くまでに思った以上に時間がかかるものです。
スケジュールを十分に把握していないと、希望していた時期に入居できない、間に合わせるために納得のいかないプランのまま進めてしまうなど、様々な問題を引き起こします。
計画から引き渡しまで、何をしなければならないのか、それぞれにどれくらいの期間が掛かるのかを事前に把握しておきましょう。
計画から契約まで
まず、最初に行うべきことは資金計画です。家づくりは非常に大きな買い物なので、十分に計画を練りましょう。いくらまでなら無理なく返済できるのかだけでなく、建てるべきタイミングや頭金の額などもシミュレーションして、最も適した計画を立てる必要がありますが、独学では限界があるので、住宅会社かファイナンシャルプランナーなどに依頼すると良いでしょう。
雑誌やネット、内覧会などからいくつかの住宅会社を選定し、絞っていきます。
単純にブランドや価格だけでなく、デザイン、実績、人柄、アフターなど様々な要素から決めることが重要です。
土地をお持ちでない方が最初に遭遇する関門です。希望している土地が見つからず、また見つかったとしても高くて予算オーバーになってしまい、数カ月が過ぎてしまうということがよくあります。土地は住宅会社の協力のもと、進めていくとよいでしょう。
住宅会社からプランと見積りの提案を受けます。住宅会社によって異なりますが、ラフプランと簡易見積りから始まり、詳細プランや見積もりは設計契約といった仮契約を通した上で提出することが一般的です。
建築地の地質調査をして、地盤がどれくらいの強さなのかを測ります。
内容を十分に確認した上で、本契約の締結と住宅ローンの申し込みを行います。
契約から引き渡しまで
契約を締結したら、すぐに工事が始まるわけではありません。本契約した内容の通りに家を建ててよいのかどうかを審査機関に届け審査します。問題がなければ『建築確認済証』という証書が発行され、公に認められたことになります。
通常は1~2週間程度で済みますが、過去の違法建築によるトラブルなどの原因もあり、以前に比べると審査が厳しくなっており、1ヶ月近く掛かるケースもあります。
余裕をもって計画を立てましょう。
まず、土地によっては地盤改良をしなければ家を建てることができないケースがあります。これは地盤調査の際に、改良が必要か必要でないかは分かりますが、必要となった場合、改良費用として100万円前後の金額が掛かります。
必ず事前に把握して資金計画に盛り込みましょう。
工事の安全を祈願して行う昔からの習慣です。必ずしも行わなければならないわけではなく、近年では地鎮祭を行わない人も増えてきています。しかし、一生に一度の家づくりです。生涯にわたって安心して住み続けられるように、そして良い思い出として残るように地鎮祭を行うことをお勧めします。地鎮祭では、神主さんに支払う費用が必要となります。
いよいよ工事が始まります。
最初は基礎工事から始まり、家を支える重要な個所が作られます。
家の主要な構造体を組み立てていき、棟木を上げる作業や儀式を行います。これによってようやく家の形を成すことになります。住宅会社によりますが、一般的には上棟式という儀式を行います。
家が完成し、まもなく引き渡しとなります。
家が完成してから引き渡しまでの間に、家の出来具合をチェックしましょう。まだ最終的な金額を支払っていない段階なので、多少の手直しなら可能となります。
おめでとうございます。新居の鍵を受け取り、正式に家が依頼主のものになります。
家は、一度住み始めると様々な不具合が出てきてしまう可能性があるものです。例えばクロスがよじれたり、建具の立て付けが悪くなったり、もしくは乾燥によって木材が反ってしまったり…。
これらは必ずしも施工が原因というわけではありません。慌てず落ち着いて、まずは依頼した住宅会社に相談しましょう。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
<ul class="ti_tgl"> <li class="tgl_tab"> <input id="sitgl01" type="checkbox" name="tabs" class="tgl_tabwrap"> <label for="sitgl01"> 01 賢い土地の探し方 <div class="ti_tgl_tabicon"><i class="fas fa-chevron-right"></i></div> </label> <div class="ti_tgl_tab"> <p>住宅を購入する際に、必ず必要となってくるもの・・・それが『土地』なわけですが、すでに土地をお持ちの方を除くと、すべての方が今後数十年と生活をしていく起点となる土地を探し、決めなければなりません。</p> <p>その重要な起点となる土地探しに、もし失敗してしまったら・・・<br>考えるだけで恐ろしいことになるでしょう。</p> <p>なぜならば、家具や模様替えなどによってイメージや機能を変えることのできる家と違って、土地は一度決めてしまってからでは、その土地を動かすこともできないし、形を変えることもできないからです。<br>土地を決めるということは、まさに一生付き合っていくパートナーを決めるようなものかもしれません。</p> <p>しかし、土地探しに十分に満足し、成功したと思っている住宅購入者が驚くほど少ないのも現実です。<br>どんなに理想的な住宅を建てたとしても、その建物の下にある土地に不満を持ってしまっては、家づくりに成功したとは言えず、後悔してしまうかもしれません。</p> <p>では、失敗しない賢い土地探しをするために、必要なものは一体なんなのか。<br>そのポイントをいくつかお伝えします。</p> <p class="ti_tgl_tit">1. 土地に『良い』も『悪い』もない</p> <p>一般的に土地の良し悪しを図る材料として、大きさ、形、位置(日当たり)、高低差、駅からの距離、近隣施設、学区などがあります。<br>多くの人が、できるだけ大きな土地で、形がよく、南側道路の日当たりの良い土地で、高低差が無く平らで、駅からの距離も近く、近隣にはスーパーやコンビニがあり、そして希望の学区内・・・そんな土地を希望することと思います。</p> <p>では、もしそのような土地に巡り合えたら、土地探しは成功するのか??<br>というと、そうはなりません。何故かというと、そのような理想的な土地は、驚くほど高額だからです。</p> <p>土地の価格というのは、一般的には路線価と面積、そして地面の状況などによって決まると言われていますが、実はもっとわかりやすいパロメーターがあるのです。</p> <p>それは、、、『人気』です。</p> <p>欲しがる人が多ければ多いほど、土地の価格は高くなり、欲しがる人が少なければ安くなります。<br>例えば、非常に条件の良い土地であっても、その土地近辺で悲惨な事件が起こったとすると、欲しがる人が少なくなり、結果土地自体は全く変わっていないのに、価格が安くなったりするのです。</p> <p>先程の土地を見てみましょう。<br>良い条件をすべて満たしている土地であれば、大半の方が欲しがることでしょう。結果、非常に高い土地となり、予算の多くを占めてしまう可能性があります。<br>どんなに条件の良い土地を手に入れることができたとしても、そのせいで予算が厳しくなり、結果、家を妥協せざるを得なくなるかもしれません。<br>もしくは、予定より多くの住宅ローンを組むことになり、日々の生活が苦しくなるかもしれません。</p> <p>家づくりは土地だけではありません。その上に家族の希望を満たす家が建ち、そして日々の生活にゆとりを持った支払いができる資金計画を立てることが必要です。</p> <p class="ti_tgl_tit">2. 建物と土地をセットで考える</p> <p>土地の価格のカラクリを把握した上で次にやるべきこと、それは「どの条件を外していくか」です。すべての条件を満たそうとすると高額になってしまい、条件をひとつ外していくと、その分だけ安くなっていくと考えましょう。</p> <p>そうすると、多くの方が「妥協」しなければいけないのかと思われることでしょう。そうではありません。</p> <p>学区や駅からの距離など、外部要因の条件は別として、土地自体の条件、例えば大きさや形、位置などは、条件が悪いからといって必ずしもマイナスになるとは限りません。</p> <p>例えば、高低差のある土地であっても設計次第では、その高低差をうまく活かして、平な土地では決してできないような個性的なプランを可能にすることもあれば、北側道路の一般的には日当たりの悪いと言われている土地であっても、設計次第では、吹き抜けや中庭を組み込むことによって四方から光を取り込む明るい家にすることも可能です。</p> <p>つまり、土地は設計次第で良くも悪くもなるのです。<br>どのような建物にするのか、それを決めながら土地を探すと、条件は悪くとも理想的な土地に出会える可能性が増えていきます。</p> <p class="ti_tgl_tit">3. まずは資金計画から</p> <p>土地探しにおけるよくある失敗事例として、土地にお金を掛けすぎてしまうことが挙げられます。良い土地を探し回った結果、条件は良いが高額な土地を購入してしまい、建物の予算を大幅に削ってしまうことになります。<br>特に、土地購入時には、不動産情報に載っている価格以外に、必要なお金もあります。<br>これらをしっかりと把握して土地を購入しないと、その分のしわ寄せが建物自体やその後の生活に圧し掛かってくることになります。</p> <p>まずは、しっかしと資金計画を立て、いくらまでの土地であれば、建物にある程度の希望を叶えながら十分に支払っていけるのかを把握することが重要です。</p> </div> </li> <li class="tgl_tab"> <input id="sitgl02" type="checkbox" name="tabs" class="tgl_tabwrap"> <label for="sitgl02"> 02 住宅取得までのスケジュール <div class="ti_tgl_tabicon"><i class="fas fa-chevron-right"></i></div> </label> <div class="ti_tgl_tab"> <p>家づくりは計画をスタートしてからお引渡しというゴールに行くまでに思った以上に時間がかかるものです。<br>スケジュールを十分に把握していないと、希望していた時期に入居できない、間に合わせるために納得のいかないプランのまま進めてしまうなど、様々な問題を引き起こします。<br>計画から引き渡しまで、何をしなければならないのか、それぞれにどれくらいの期間が掛かるのかを事前に把握しておきましょう。</p> <p class="ti_tgl_tit">計画から契約まで</p> <div class="page_ti_time-Edit-line"> <ul class="ti_time-Edit-line"> <li> <div class="ti_time-Edit-line-badge">1</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">資金計画</h3></div> <div class="ti_time-Edit-line-body"> <p>まず、最初に行うべきことは資金計画です。家づくりは非常に大きな買い物なので、十分に計画を練りましょう。いくらまでなら無理なく返済できるのかだけでなく、建てるべきタイミングや頭金の額などもシミュレーションして、最も適した計画を立てる必要がありますが、独学では限界があるので、住宅会社かファイナンシャルプランナーなどに依頼すると良いでしょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">2</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">住宅会社選び</h3></div> <div class="ti_time-Edit-line-body"> <p>雑誌やネット、内覧会などからいくつかの住宅会社を選定し、絞っていきます。<br>単純にブランドや価格だけでなく、デザイン、実績、人柄、アフターなど様々な要素から決めることが重要です。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">3</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">土地探し</h3></div> <div class="ti_time-Edit-line-body"> <p>土地をお持ちでない方が最初に遭遇する関門です。希望している土地が見つからず、また見つかったとしても高くて予算オーバーになってしまい、数カ月が過ぎてしまうということがよくあります。土地は住宅会社の協力のもと、進めていくとよいでしょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">4</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">プラン・見積り</h3></div> <div class="ti_time-Edit-line-body"> <p>住宅会社からプランと見積りの提案を受けます。住宅会社によって異なりますが、ラフプランと簡易見積りから始まり、詳細プランや見積もりは設計契約といった仮契約を通した上で提出することが一般的です。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">5</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">地盤調査</h3></div> <div class="ti_time-Edit-line-body"> <p>建築地の地質調査をして、地盤がどれくらいの強さなのかを測ります。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">6</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">本契約・住宅ローン申込み</h3></div> <div class="ti_time-Edit-line-body"> <p>内容を十分に確認した上で、本契約の締結と住宅ローンの申し込みを行います。</p> </div> </div> </li> </ul> </div> <p class="ti_tgl_tit">契約から引き渡しまで</p> <div class="page_ti_time-Edit-line"> <ul class="ti_time-Edit-line"> <li> <div class="ti_time-Edit-line-badge">1</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">建築確認申請</h3></div> <div class="ti_time-Edit-line-body"> <p>契約を締結したら、すぐに工事が始まるわけではありません。本契約した内容の通りに家を建ててよいのかどうかを審査機関に届け審査します。問題がなければ『建築確認済証』という証書が発行され、公に認められたことになります。<br>通常は1~2週間程度で済みますが、過去の違法建築によるトラブルなどの原因もあり、以前に比べると審査が厳しくなっており、1ヶ月近く掛かるケースもあります。<br>余裕をもって計画を立てましょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">2</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">地盤改良</h3></div> <div class="ti_time-Edit-line-body"> <p>まず、土地によっては地盤改良をしなければ家を建てることができないケースがあります。これは地盤調査の際に、改良が必要か必要でないかは分かりますが、必要となった場合、改良費用として100万円前後の金額が掛かります。<br>必ず事前に把握して資金計画に盛り込みましょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">3</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">地鎮祭</h3></div> <div class="ti_time-Edit-line-body"> <p>工事の安全を祈願して行う昔からの習慣です。必ずしも行わなければならないわけではなく、近年では地鎮祭を行わない人も増えてきています。しかし、一生に一度の家づくりです。生涯にわたって安心して住み続けられるように、そして良い思い出として残るように地鎮祭を行うことをお勧めします。地鎮祭では、神主さんに支払う費用が必要となります。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">4</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">着工</h3></div> <div class="ti_time-Edit-line-body"> <p>いよいよ工事が始まります。<br>最初は基礎工事から始まり、家を支える重要な個所が作られます。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">5</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">上棟</h3></div> <div class="ti_time-Edit-line-body"> <p>家の主要な構造体を組み立てていき、棟木を上げる作業や儀式を行います。これによってようやく家の形を成すことになります。住宅会社によりますが、一般的には上棟式という儀式を行います。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">6</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">完成</h3></div> <div class="ti_time-Edit-line-body"> <p>家が完成し、まもなく引き渡しとなります。<br>家が完成してから引き渡しまでの間に、家の出来具合をチェックしましょう。まだ最終的な金額を支払っていない段階なので、多少の手直しなら可能となります。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">7</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">引き渡し</h3></div> <div class="ti_time-Edit-line-body"> <p>おめでとうございます。新居の鍵を受け取り、正式に家が依頼主のものになります。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">6</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">アフターメンテナンス</h3></div> <div class="ti_time-Edit-line-body"> <p>家は、一度住み始めると様々な不具合が出てきてしまう可能性があるものです。例えばクロスがよじれたり、建具の立て付けが悪くなったり、もしくは乾燥によって木材が反ってしまったり…。<br>これらは必ずしも施工が原因というわけではありません。慌てず落ち着いて、まずは依頼した住宅会社に相談しましょう。</p> </div> </div> </li> </ul> </div> </div> </li> </ul> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
.ti_tgl *, .ti_tgl *:after, .ti_tgl *:before { box-sizing: border-box; } .ti_tgl { overflow-x: hidden; margin: 0 auto 3rem; } .ti_tgl li{ list-style: none; margin-bottom: 1.5rem; } .ti_tgl label { display: block; width: 100%; margin: 0; padding: 1.2rem 1rem 1.2rem 40px; cursor: pointer; color: #fff; position: relative; background-color: #222; } .ti_tgl label::before{ content: " "; display: block; position: absolute; top: 50%; left: 7px; width: 26px; height: 30px; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .ti_tgl #sitgl01 + label::before{ background-image: url("../images/page/ti_advice01.png"); } .ti_tgl #sitgl02 + label::before{ background-image: url("../images/page/ti_advice02.png"); } .ti_tgl .ti_tgl_tab { position: relative; overflow: hidden; height: 0; padding: 0 0.8rem; transition: 0.4s ease; opacity: 0; } .ti_tgl .tgl_tab input[type=checkbox]:checked ~ .ti_tgl_tab { height: auto; padding: 1.2rem 0.8rem 1rem; opacity: 1; } .ti_tgl .tgl_tab input[type=checkbox] { display: none; } .ti_tgl_tit{ font-size: 1.3rem; border-top: 1px #222 solid; border-bottom: 1px #222 solid; padding: 0.5rem; margin-top: 2rem; font-weight: bold; } @media screen and (min-width: 768px){ .ti_tgl label{ font-size: 1.4rem; padding: 1.2rem 1rem 1.2rem 80px; } .ti_tgl label::before{ width: 50px; height: 50px; left: 15px; } } /* ti_tgl_tabicon */ .ti_tgl_tabicon{ position: absolute; display: block; width: 1rem; height: 100%; top: 0; right: 8px; } .ti_tgl_tabicon i { content: ""; position: absolute; top: calc(50% - 0.5rem); transition: -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform .6s cubic-bezier(0.215, 0.61, 0.355, 1); } .tgl_tabwrap:checked + label .ti_tgl_tabicon i { -webkit-transform: rotate(90deg); transform: rotate(90deg); } @media screen and (min-width: 768px){ .ti_tgl_tabicon{ right: 18px; } } |
今回のQ&A内で使用している見出しです。
1. 土地に『良い』も『悪い』もない
html
1 |
<p class="ti_tgl_tit">1. 土地に『良い』も『悪い』もない</p> |
css
1 2 3 4 5 6 7 8 |
.ti_tgl_tit{ font-size: 1.3rem; border-top: 1px #222 solid; border-bottom: 1px #222 solid; padding: 0.5rem; margin-top: 2rem; font-weight: bold; } |
今回のQ&A内で使用している流れです。
色が違うだけで基本的にこれと同じです。
まず、最初に行うべきことは資金計画です。家づくりは非常に大きな買い物なので、十分に計画を練りましょう。いくらまでなら無理なく返済できるのかだけでなく、建てるべきタイミングや頭金の額などもシミュレーションして、最も適した計画を立てる必要がありますが、独学では限界があるので、住宅会社かファイナンシャルプランナーなどに依頼すると良いでしょう。
雑誌やネット、内覧会などからいくつかの住宅会社を選定し、絞っていきます。
単純にブランドや価格だけでなく、デザイン、実績、人柄、アフターなど様々な要素から決めることが重要です。
土地をお持ちでない方が最初に遭遇する関門です。希望している土地が見つからず、また見つかったとしても高くて予算オーバーになってしまい、数カ月が過ぎてしまうということがよくあります。土地は住宅会社の協力のもと、進めていくとよいでしょう。
住宅会社からプランと見積りの提案を受けます。住宅会社によって異なりますが、ラフプランと簡易見積りから始まり、詳細プランや見積もりは設計契約といった仮契約を通した上で提出することが一般的です。
建築地の地質調査をして、地盤がどれくらいの強さなのかを測ります。
内容を十分に確認した上で、本契約の締結と住宅ローンの申し込みを行います。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<div class="page_ti_time-Edit-line"> <ul class="ti_time-Edit-line"> <li> <div class="ti_time-Edit-line-badge">1</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">資金計画</h3></div> <div class="ti_time-Edit-line-body"> <p>まず、最初に行うべきことは資金計画です。家づくりは非常に大きな買い物なので、十分に計画を練りましょう。いくらまでなら無理なく返済できるのかだけでなく、建てるべきタイミングや頭金の額などもシミュレーションして、最も適した計画を立てる必要がありますが、独学では限界があるので、住宅会社かファイナンシャルプランナーなどに依頼すると良いでしょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">2</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">住宅会社選び</h3></div> <div class="ti_time-Edit-line-body"> <p>雑誌やネット、内覧会などからいくつかの住宅会社を選定し、絞っていきます。<br>単純にブランドや価格だけでなく、デザイン、実績、人柄、アフターなど様々な要素から決めることが重要です。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">3</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">土地探し</h3></div> <div class="ti_time-Edit-line-body"> <p>土地をお持ちでない方が最初に遭遇する関門です。希望している土地が見つからず、また見つかったとしても高くて予算オーバーになってしまい、数カ月が過ぎてしまうということがよくあります。土地は住宅会社の協力のもと、進めていくとよいでしょう。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">4</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">プラン・見積り</h3></div> <div class="ti_time-Edit-line-body"> <p>住宅会社からプランと見積りの提案を受けます。住宅会社によって異なりますが、ラフプランと簡易見積りから始まり、詳細プランや見積もりは設計契約といった仮契約を通した上で提出することが一般的です。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">5</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">地盤調査</h3></div> <div class="ti_time-Edit-line-body"> <p>建築地の地質調査をして、地盤がどれくらいの強さなのかを測ります。</p> </div> </div> </li> <li> <div class="ti_time-Edit-line-badge">6</div> <div class="ti_time-Edit-line-panel"> <div class="ti_time-Edit-line-heading"><h3 class="ti_time-Edit-line-title">本契約・住宅ローン申込み</h3></div> <div class="ti_time-Edit-line-body"> <p>内容を十分に確認した上で、本契約の締結と住宅ローンの申し込みを行います。</p> </div> </div> </li> </ul> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
.ti_time-Edit-line { list-style: none; padding: 0; position: relative; } .ti_time-Edit-line:before { top: 0; bottom: 0; position: absolute; content: " "; width: 2px; background-color: #565656; left: 50%; margin-left: -1.5px; } .center-none .ti_time-Edit-line:before{ display: none; } .ti_time-Edit-line > li { margin-bottom: 20px; position: relative; } .page_ti_time-Edit-line .ti_time-Edit-line > li{ padding-left: 0; display: flex; } .ti_time-Edit-line > li:before,.ti_time-Edit-line > li:after { content: " "; display: table; } .ti_time-Edit-line > li:after { clear: both; } .ti_time-Edit-line > li:before,.ti_time-Edit-line > li:after { content: " "; display: table; } .ti_time-Edit-line > li:after { clear: both; } .ti_time-Edit-line > li > .ti_time-Edit-line-panel { width: 46%; border-radius: 2px; padding: 20px; position: relative; background-color: #ececec; flex-grow: 1; margin-left: 1.5rem; } .ti_time-Edit-line > li:nth-child(even) > .ti_time-Edit-line-panel { background-color: #d8d8d8; } .ti_time-Edit-line > li > .ti_time-Edit-line-panel:after { position: absolute; top: 12px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #ececec; border-right: 0 solid #ececec; border-bottom: 14px solid transparent; content: " "; } .ti_time-Edit-line > li:nth-child(even) > .ti_time-Edit-line-panel:after { border-left: 0 solid #d8d8d8; border-right: 14px solid #d8d8d8; } .ti_time-Edit-line > li > .ti_time-Edit-line-badge { color: #565656; width: 50px; height: 50px; line-height: 48px; text-align: center; position: relative; background-color: #fff; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */ border: 2px #565656 solid; font-weight: 700; } .ti_time-Edit-line > li.ti_time-Edit-line-inverted > .ti_time-Edit-line-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } .ti_time-Edit-line > li.ti_time-Edit-line-inverted > .ti_time-Edit-line-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .ti_time-Edit-line-badge.primary { background-color: #444 !important; } .ti_time-Edit-line-badge.success { background-color: #666 !important; } .ti_time-Edit-line-badge.warning { background-color: #888 !important; } .ti_time-Edit-line-badge.danger { background-color: #aaa !important; } .ti_time-Edit-line-badge.info { background-color: #222 !important; } .ti_time-Edit-line-title { margin-top: 0; color: inherit; } .ti_time-Edit-line-body > p,.ti_time-Edit-line-body > ul { margin-bottom: 0; } .ti_time-Edit-line-body > p + p { margin-top: 5px; } ul.ti_time-Edit-line:before { left: 25px; } ul.ti_time-Edit-line > li > .ti_time-Edit-line-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.ti_time-Edit-line > li > .ti_time-Edit-line-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; } .ti_time-Edit-line { list-style: none; } .ti_time-Edit-line > li { margin-bottom: 60px; } .page_ti_time-Edit-line .ti_time-Edit-line > li { margin-bottom: 0; } .time { font-size: 1.4rem; font-weight: bold; } .ti_time-Edit-line-title{ font-weight: 700; font-size: 1.2rem; color: #000; letter-spacing: 0.1rem; margin-bottom: 1rem; } @media screen and (min-width: 1200px){ .page_ti_time-Edit-line{ padding-top: 2rem; } ul.ti_time-Edit-line:before{ left: 31px; } .ti_time-Edit-line > li > .ti_time-Edit-line-badge{ width: 60px; height: 60px; line-height: 60px; font-size: 2rem; } .ti_time-Edit-line > li > .ti_time-Edit-line-panel{ padding: 30px; } .ti_time-Edit-line-title{ font-size: 1.4rem; } } /* for Desktop */ @media ( min-width : 640px ){ .ti_time-Edit-line > li { overflow: hidden; margin: 0; position: relative; } } @media screen and (max-width: 639px){ .ti_time-Edit-line > li { padding-left: 20px; } } |
テキストと背景画像が重なっているボタンです。
基本的な枠は2つとも同じで、背景画像やテキスト部分の背景色・文字の色はそれぞれ別のクラスで指定しています。
これに使っているボタンも背景画像が違うだけで同じボタンです。
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="container"> <div class="row"> <div class="col-12 col-md-6 m20-bottom"> <div class="ti_btn tibtn1 tibtn_img1"> <a href=""> <div class="tibtn_txtbox"> <h4 class="tibtn_tit"><span>GALLERY</span>施工事例</h4> <p>SIMPLE NOTEの家の<br>魅力を写真でご紹介</p> </div> </a> </div> </div> <div class="col-12 col-md-6 m20-bottom"> <div class="ti_btn tibtn2 tibtn_img2"> <a href=""> <div class="tibtn_txtbox"> <h4 class="tibtn_tit"><span>EVENT</span>イベント情報</h4> <p>完成見学会やセミナーの<br>開催情報をチェック!</p> </div> </a> </div> </div> </div> </div> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
/*共通*/ .ti_btn{ width: 100%; display: block; } .ti_btn a{ display: block; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; } .ti_btn a:hover{ text-decoration: none; } .tibtn_txtbox{ display: flex; min-height: 200px; align-items: center; align-content: center; flex-wrap: wrap; width: 20%; min-width: 170px; text-align: center; justify-content: center; transition: .3s; } .ti_btn a:hover .tibtn_txtbox{ width: 100%; } .tibtn_tit{ min-height: 100px; align-items: flex-end; justify-content: center; display: flex; flex-wrap: wrap; align-content: flex-end; font-weight: bold; font-size: 1rem; line-height: 1.7; position: relative; margin-bottom: 1.2rem; padding-bottom: 0.5rem; width: 100%; } .tibtn_tit::after{ content: " "; display: block; width: 50px; height: 1px; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .tibtn_tit span{ display: block; font-family: 'Fjalla One', sans-serif; /* テーマの英語フォントに合わせる */ font-size: 1.6rem; width: 100%; } .ti_btn p{ font-size: 0.8rem; } @media screen and (min-width: 992px){ .tibtn_txtbox{ min-height: 250px; min-width: 210px; } .tibtn_tit{ font-size: 1.2rem; line-height: 1.6; margin-bottom: 1.4rem; padding-bottom: 0.8rem; min-height: 120px; } .tibtn_tit span{ font-size: 2.2rem; } .ti_btn p{ font-size: 1rem; } } /*背景色1*/ .tibtn1 a{ color: #fff; } .tibtn1 .tibtn_txtbox{ background-color: #222; } .tibtn1 a:hover .tibtn_txtbox{ background-color: rgba(34,34,34,0.80); } .tibtn1 .tibtn_tit::after{ background-color: #fff; } /*画像指定1*/ .tibtn_img1 a{ background-image: url("../images/page/tibtn01.jpg"); } .tibtn_img1-1 a{ background-image: url("../images/page/remo01.jpg"); } /*背景色2・画像指定2*/ .tibtn2 a{ color: #222; } .tibtn2 .tibtn_txtbox{ background-color: #ddd; } .tibtn2 a:hover .tibtn_txtbox{ background-color: rgba(221,221,221,0.80); } .tibtn2 .tibtn_tit::after{ background-color: #222; } /*画像指定2*/ .tibtn_img2 a{ background-image: url("../images/page/tibtn02.jpg"); } .tibtn_img2-1 a{ background-image: url("../images/page/remo02.jpg"); } |