--- title: "好きなサイトからホームページ作成 | Briks" url: https://briks.dev/ja/docs/build-from-sites-you-like description: "気に入ったサイト1つとスクリーンショット最大6枚を追加。Briksがレイアウトや余白、書体、動き、メニューを読み取り、真似せず雰囲気を活かして作ります。" last_updated: 2026-10-08 --- # 好きなサイトからホームページ作成 レイアウトや雰囲気が気に入ったサイトがあれば、Briksに見せてください。Briksはページの組み立て方を調べ、あなたの言葉と写真で、その雰囲気のサイトを作ります。このページでは、サイトとスクリーンショットの追加方法、Briksが読み取るものと決して取らないもの、サイトが読み取れないときの対処を説明します。 読了時間 7 分 2026年10月8日にスタジオで確認済み ## サイトとスクリーンショットの追加 1. ステップを開く 場所: Show what you like New projectの3番目のステップで、**Optional** と表示されています。パネルには目的が書かれています。「Show a site or screenshots you admire. These become rules for the build; the rest is designed for your business.」 2. サイトを追加 場所: A site to learn from アドレスを入力または貼り付けて、**Add** を押すかEnterを押してください。https は省略できます。1つのプロジェクトに追加できるサイトは1つで、2つ目を追加しようとすると「One site per project. Remove it to add another.」と表示されます。追加したサイトはタグとして表示され、×印で削除できます。 3. スクリーンショットを追加 場所: Screenshots **Add screenshots** を押して、1枚あたり12 MB未満のJPEG、PNG、WebPファイルを選びます。カウンターに現在の枚数が表示され、上限は **6 of 6** です。 4. 各スクリーンショットが何を示しているかを書きましょう 場所: Screenshots **Whole page** を選び、わかる場合は撮影した画面として **Desktop**、**Tablet**、**Phone** のいずれかを選びます（**Screen size: detect** なら自動で判断します）。または **One section** を選び、ヒーロー、料金、お客様の声、フッターなど、写っている部分を指定します。 5. 次へ進む 場所: Show what you like **Next** を押します。確認画面にサイトのアドレスとスクリーンショットの枚数が表示されます。 登録前に briks.dev のボックスからサイトを1つ持ち込むこともできます。**+** メニューを開いて **Add a site you like** を選ぶと、登録後にこのステップに反映されます。 ## Briksが読み取る内容 サイトは、Briksがクッキーバナーに応答してポップアップを閉じたあと、デスクトップ、タブレット、スマートフォンの幅で読み取られます。確認する項目は次のとおりです。 - **レイアウト:** セクションの上から下への順番、コンテンツの幅、列の数、スマートフォンで変わる点。 - **Spacing:** セクションの間隔と、セクション内の間隔のリズムです。 - **Type:** 見出しと本文のサイズと太さ、書体の個性。 - **色:** 背景、文字の色、アクセントカラー。 - **動き:** スクロールで フェードインやスライドインするもの、固定されたままのもの、自動で動く行、ポインターを合わせたときのリンクやボタンの動き。 - **ヘッダーとそのメニュー:** シンプルなリンクの列、ドロップダウン、大きなパネルなどです。どのパネルも開いて確認します。 - **イラスト:** ページが写真ではなく絵を使っている場合、あなたの画像も似たタッチで描かれます。 スクリーンショットから Briks が読み取れる情報は多くありません。レイアウトと配置、余白、見出しの大きさ、色、そして明るいか暗いかです。**One section** と付いたスクリーンショットは、そのセクションについてだけ伝えます。 ## 絶対に受け取らないもの パネルにははっきりこう書かれています。「1プロジェクトにつき1サイト。構造、リズム、書体を測定します。何もコピーしません。」実際には次のとおりです。 - **文章。** 公開前に、気に入ったサイトからそのまま取った文がないかをチェックし、あれば、お客様のビジネスらしい言葉に書き直します。お客様自身の指示に由来する文はそのまま残します。 - **ロゴと名前。** ヘッダーには、お名前、アップロードしたロゴ、または描いたマークが入ります。 - **画像。** スタジオのライブラリから選ばれるか、新しく描き起こされるか、ご自身で追加したものになります。 - **他社。** クライアントやパートナーのロゴの列には、ご指定の名前だけが表示されます。 作成前の質問は、あなたのブリーフとアドレスだけから作られ、相手のサイトの文章は使われません。 ## サイト、スクリーンショット、または両方 Briksがサイトにどこまで忠実に従うかは、ほかに何を渡すかによって変わります。 | 追加できるもの | Briksでできること | | --- | --- | | 1つのサイトだけ | そのページで、お店や会社に合わせたホームページのトップページのセクションの順番を決めます | | サイトとスクリーンショット | 両方でビルドを導くので、サイトが順序を決めることはなくなります。あるセクションのスクリーンショットは、そのセクションを決めます | | スクリーンショットのみ | レイアウトと見た目の目安になりますが、セクションのスクリーンショットがそのセクションを決めます | | **Your brand** の設定 | 参考サイトよりも優先されるので、気に入ったサイトが緑色でも、あなたのアクセントカラーはそのままです | 対象のページをピンポイントで指定する Briks が読むのは、指定されたアドレスのページだけで、サイト全体ではありません。気に入った料金ページなら、ホームページではなく料金ページのアドレスを貼り付けてください。 ## サイトと照らし合わせてビルドを確認する サイトを追加すると、このステップに **Measure the build against the reference** も表示されます。初期設定ではオフです。オンにすると、Briksは公開前に作成したページと気に入ったサイトを比較し、測定した差を修正します。これが使えるのは、スクリーンショットがなくそのサイトだけが参考のときです。その場合にページがそのレイアウトに沿うためです。ビルドにクレジットと時間が余分にかかるので、細かく似せる必要がなければオフのままにしてください。あとから **Preferences** の **Measure builds against the reference** で変更できます。 ## サイトがほかの設定をどう変えるか - **選ぶ見た目やヒーローはありません。** **How it is built** のステップには「Your reference site decides the look and the hero, so there is none to choose.」と表示されます。briks.dev では、**Pick a look first** が「The site you like sets the look.」と表示されてオフになります。[見た目を選ぶ](https://briks.dev/ja/docs/pick-a-look) をご覧ください。 - **質問が少なくなります。** サイトがすでに答えを示しているため、Briksはレイアウトや見た目、ページの主役について尋ねません。 - **Dashboards** でも参考を使えます。Briksは画面を読み取り、ナビゲーション(サイドバーかトップバー)と、パネル、表、グラフの数を把握します。ダッシュボードの多くはサインインの先にあるため、スクリーンショットで示すのが一般的です。 ビルドの実行中、会話に **What your references decided** というボックスが表示され、各参考サイトが決めたことを一覧にします。コンテンツの幅、リズム、ヘッダーのメニュー、動きなどです。 ## サイトを読み取れないとき ほとんどの公開ページは問題なく読み取れます。読み取れない主な理由は次のとおりです: - **サインインが必要なページです。** Briksが見られるのは、サインインしていない訪問者に見える内容です。ログインが必要な部分はスクリーンショットをお使いください。 - **自動アクセスを断るサイトがあります。** ページの代わりにロボットチェックを返すサイトです。Briksは別の方法でも試し、それも阻まれた場合、そのサイトはスキップされます。 - **Cookieバナーとポップアップ** が問題になることはまずありません。Briksは確認前にバナーに応じ、ポップアップを閉じるからです。 サイトは読み取れなくてもスクリーンショットが読み取れる場合、ビルドはサイトなしで続行され、ボックスに「1件の参照を読み取れず、スキップしました。」と表示されます。追加したものがどれも読み取れない場合は、依頼されていないサイトをデザインしないよう、ビルドは停止します。このように停止したビルドには請求されず、保留分は戻ります。スタジオの表示は理由によって異なります: | スタジオのメッセージ | 対処方法 | | --- | --- | | 「参照用のアドレスを開けませんでした。」と「請求はありませんでした。」 | **Build without it** を押すと、あなたの言葉と回答をそのままにして同じリクエストをビルドし、新しいプロジェクトのクレジットを再び保留します。または **Remove it** を押すと **Preferences** の **Reference site** が開き、**Remove** でアドレスを外せます。 | | 「参考サイトがスタジオのブラウザを受け付けなかったため、読み取れませんでした。別の参考サイトをお試しください。」 | **Screenshots** の下にあるページのスクリーンショット、または別のサイトを使って、新しいプロジェクトを始めます。 | | 「システムエラーのため、参照先を読み取れませんでした。しばらくしてからもう一度お試しください。」 | しばらくしてから **Try again** を押してください。入力した言葉と回答は保持されているので、同じ質問を二度聞かれることはありません。または、入力欄に入力して、新しい言葉を加えてやり直すこともできます。 | **Preferences** の **Reference site** グループには、サイトが初めて公開されるまでアドレスが表示されます。意図したとおりに保存されたかを確認できます。 どこで 1. Projects 2. Your project 3. Settings 4. Preferences 5. Reference site ## 具体例 1サイト ホテルのような落ち着きを大切にする歯科医院 > 指示内容: ハロゲートにある、歯科医4名、土曜午前の診療、予約リクエストフォームを備えた家族向け歯科医院。追加したサイト: オーナーが落ち着いていて広々としていると感じた小さなホテルのホームページ。ほかには何もありません。 クリニックのトップページは、ホテルのページの順序とゆったりした余白に倣いつつ、クリニック自身の言葉、施術、写真を使います。ホテルの名前、写真、文章はどこにも出てきません。 サイトとスクリーンショット サイトとスクリーンショットを用意した、コーヒー焙煎所 > サイト:メニューが大きなパネルに開く焙煎所。スクリーンショット:ショップの商品グリッドで、**One section** と印を付け、商品を選択済み。**Your brand**:アクセントカラー `#B4542D`。 スクリーンショットを追加すると、ロースタリーのページがセクションの順番を決めることはなくなります。パネルメニューは引き継がれ、商品セクションはスクリーンショットに沿い、参考サイトの色よりもロースターのアクセントカラーが優先されます。 ## よくある質問 ### サイトを作ったあとで参考を追加できますか? はい、画像としてなら使えます。スタジオの入力欄にスクリーンショットを添付し、**Reference** のままにして、そこから何を取り入れたいかを伝えてください。例:`Make the pricing section feel like this, three columns with the middle one raised.` ### パスワードが必要なサイトを作れますか? あまり役に立ちません。Briksが読み取れるのは公開ページだけです。代わりにスクリーンショットを撮って、**Screenshots** に追加してください。 ### なぜもうデザインを選べないのですか? 気に入ったサイトがあれば、それが見た目を決めます。3つのボードから選びたい場合は、**Show what you like** でそのサイトを外してください。 ## 次に読む - [ビルド中 **新しいプロジェクトを始める** 新規プロジェクトページの全選択肢を順に解説：種類、依頼内容、気に入ったサイト、ブランド、画像、ビルド設定、開始時の費用。](https://briks.dev/ja/docs/new-project) - [ビルド中 **デザインを選ぶ** サイトを作成する前に、3つのルックを確認できます。色、書体、角の形、ボタン、カードを、お客様ご自身のヒーローの言葉で組んだボードです。選んだものを作成します。](https://briks.dev/ja/docs/pick-a-look) - [ビルド中 **良い依頼文の書き方** 最初のビルドを成功させるために指示文へ書く内容:ビジネス、対象となる人、ページ、主なアクション、事実、トーン。ビフォーとアフターの例が6つあります。](https://briks.dev/ja/docs/writing-a-brief) - [ビルド中 **Webアプリとダッシュボード** App と Dashboard の種類で作れるもの、記録の保存先、まだ使えない機能を紹介します。予約、在庫、カフェの注文を例にした実例付きです。](https://briks.dev/ja/docs/web-apps-and-dashboards) まだ解決しませんか? プロジェクト名と、表示されると思っていた内容を添えて [hello@briks.dev](mailto:hello@briks.dev) までご連絡ください。スクリーンショットがあると助かります。