[{"data":1,"prerenderedAt":159},["ShallowReactive",2],{"\u002Fgolden-ratio-calculator\u002Fja":3},{"id":4,"title":5,"body":6,"description":66,"extension":152,"meta":153,"navigation":154,"path":155,"seo":156,"stem":157,"__hash__":158},"content\u002Fgolden-ratio-calculator\u002Fja.md","Ja",{"type":7,"value":8,"toc":136},"minimark",[9,14,18,21,25,28,31,34,59,69,72,75,78,81,84,88,94,97,116,119],[10,11,13],"h2",{"id":12},"黄金比計算ツールとは","黄金比計算ツールとは？",[15,16,17],"p",{},"黄金比や白銀比などの比率プリセットを使って、幅と高さのバランスを確認できるツールです。幅または高さのどちらかを入力すると、もう一方の寸法が自動で計算され、プレビューで矩形の印象も見比べられます。カード、バナー、表紙、画像サイズなど、縦横比の候補を決めたい場面で使いやすい構成です。",[10,19,20],{"id":20},"黄金比計算ツールの使い方",[22,23,24],"h3",{"id":24},"比率プリセットを選ぶ",[15,26,27],{},"最初に、黄金比・白銀比・白金比・ダブルスクエア・正方形から使いたい比率を選びます。各プリセットには小さな図形サムネイルが付いているため、数値だけでなく形の差でも比べやすくなっています。",[22,29,30],{"id":30},"向きを決めて幅または高さを入力する",[15,32,33],{},"次に、横長か縦長かを選びます。そのうえで、幅または高さのどちらかを編集すると、もう一方の寸法が比率に合わせて自動で更新されます。横長のバナーやヒーロー画像なら幅から、表紙やポスターのような縦長レイアウトなら高さから確認すると流れが自然です。",[15,35,36,37,41,42,41,45,41,48,41,51,54,55,58],{},"入力欄の下には、",[38,39,40],"code",{},"320","、",[38,43,44],{},"480",[38,46,47],{},"720",[38,49,50],{},"1000",[38,52,53],{},"1440"," の共通サイズボタンもあり、よくある幅や高さをすばやく試せます。結果エリアでは幅・高さと CSS の ",[38,56,57],{},"aspect-ratio"," を確認できます。",[60,61,67],"pre",{"className":62,"code":64,"language":65,"meta":66},[63],"language-text","黄金比 \u002F 横長 \u002F 幅 1000\n→ 幅 1000、高さ 618\n","text","",[38,68,64],{"__ignoreMap":66},[10,70,71],{"id":71},"主な機能",[22,73,74],{"id":74},"比率プリセットのサムネイル表示",[15,76,77],{},"黄金比と白銀比は数値だけだと近く見えることがありますが、サムネイルで並べると縦横の差がつかみやすくなります。候補をざっと絞りたいときに役立ちます。",[22,79,80],{"id":80},"縦横プレビュー",[15,82,83],{},"選択した比率に合わせて、プレビュー内の図形サイズが変わります。横長と縦長を切り替えながら、どのくらい細長く見えるかをその場で確認できます。プレビューは比率比較のための表示なので、実ピクセルの大きさをそのまま再現するものではありません。",[22,85,87],{"id":86},"寸法計算と-css-比率の確認","寸法計算と CSS 比率の確認",[15,89,90,91,93],{},"計算結果では、幅・高さに加えて、CSS の ",[38,92,57],{}," で使いやすい表記も表示します。計算式もあわせて出るので、どちらの辺を基準にしたかを確認しながら数値を決められます。",[10,95,96],{"id":96},"活用シーン",[98,99,100,104,107,110],"ul",{},[101,102,103],"li",{},"カードやバナーの比率を決める前に、見た目のバランスを比較したいとき",[101,105,106],{},"黄金比と白銀比のどちらがレイアウトに合うかを見たいとき",[101,108,109],{},"ポスター、表紙、サムネイルなどで縦長・横長の印象差を確認したいとき",[101,111,112,113,115],{},"CSS の ",[38,114,57],{}," に入れる値を決めたいとき",[10,117,118],{"id":118},"使うときのポイント",[98,120,121,124,127,133],{},[101,122,123],{},"入力は整数ベースで扱えるため、カード幅や画像サイズのラフ検討に向いています",[101,125,126],{},"同じ比率でも横長と縦長では印象がかなり変わるため、向きを切り替えて見比べるのがおすすめです",[101,128,129,130,132],{},"プレビューは比率確認用なので、実装時は結果欄の数値と ",[38,131,57],{}," を基準にすると整理しやすくなります",[101,134,135],{},"すでに具体的な縦横比が決まっている画像や動画の確認には、別のアスペクト比計算ツールのほうが向いています",{"title":66,"searchDepth":137,"depth":137,"links":138},2,[139,140,145,150,151],{"id":12,"depth":137,"text":13},{"id":20,"depth":137,"text":20,"children":141},[142,144],{"id":24,"depth":143,"text":24},3,{"id":30,"depth":143,"text":30},{"id":71,"depth":137,"text":71,"children":146},[147,148,149],{"id":74,"depth":143,"text":74},{"id":80,"depth":143,"text":80},{"id":86,"depth":143,"text":87},{"id":96,"depth":137,"text":96},{"id":118,"depth":137,"text":118},"md",{},true,"\u002Fgolden-ratio-calculator\u002Fja",{"description":66},"golden-ratio-calculator\u002Fja","U6t2MqqfRSU3CLN27pRLnRukdILweV_QKHDPkXVvKDo",1777463373490]