Illustratorでwebデザインの制作(既存サイトのデザインリニューアル)を行っています。 フ

Illustratorでwebデザインの制作(既存サイトのデザインリニューアル)を行っています。
フォントサイズの調整がうまくいかず、教えてください。

当方デザインのみの担当で、コーディングは別の会社の方が担当されます。
webデザイン初心者です。


参考に、ある会社のHPのスクリーンショットを取りました。
そのスクリーンショットを、Illustratorの1100pxのアートボードに幅を合わせて貼りました。

スクリーンショットの見た目のフォントサイズに合わせようとすると、グローバルナビは7pxになってしまいます。
しかし、そのHPのグローバルナビは16pxのフォントサイズで作られています。
同じ16pxにすると、大きすぎになります。

これは何が原因でしょうか？


添付の画像は、黒文字はHPのスクリーンショット内の文字、赤字はIllustratorで入力したものとなります。

No.4 回答者： wanderer1 回答日時： 2025/01/06 20:25

＞このような、16pxでグローバルナビの文字を横並びにした場合に1100pxからはみ出してしまうようなサイトの場合には、Illustrator上ははみ出して作成してもよいものでしょうか？

もしもこれまでのレイアウトを踏襲してかまわないということであれば「はみ出してかまわない」という回答になります。

これはクライアントとの確認事項になるわけですが、面倒なら1100px内に収めるレイアウトも考えておくことが前提かなあと思います。

ただ、コンテンツ幅が1100pxだとしても、1101px以上で表示されるケースはゼロじゃないことを考えます。

自分としては「少なくとも横幅1200px以上のアートボードで1100pxのコンテンツをレイアウトする」と思います。

提案方法次第ですけれども、横幅1366pxとか。

この回答へのお礼

丁寧に教えていただきありがとうございます！
制作とクライアントとのやり取りがイメージできました！
とても助かりました！

お礼日時：2025/01/06 21:21

No.3 回答者： wanderer1 回答日時： 2025/01/06 16:36

スクリーンショットをアートボードに合わせたんですか？

ではスクリーンショットが拡大・縮小のいずれかになっているわけですよね。

スクリーンショットをアートボードに合わせるのではなく、原寸サイズで貼るのが正しい作業です。

余った部分はマスクで隠すといいですよ。

横幅1,100pxの長方形オブジェクトを作って、スクリーンショットの上にのせる。

縦方向は天で揃える。

横方向は中央で揃える。

どこまで揃えられるかはスクリーンショットの取り方によって変わるので、ある程度目分量になる可能性はあるけれども、中央で揃える。

で、マスクをかける。

この状態でアートボードに貼れば、16pxは16pxで表示できるはずです。

現状は原寸の43.75%縮小がかかっている状態ですから、グローバルナビに16pxを当てても大きすぎるのは当然ではないかなあと思います。

この回答へのお礼

アドバイスをありがとうございます。
やっと理解できました。
YouTubeの参考サイトを見て、webサイトのスクリーンショットをコピペして下敷きにする方法(配置の参考にする方法)で作成していたのですが、その過程で何か勘違いをしてしまっていたようです。
該当のサイトは、web表示画面の箱を小さくすると、グローバルナビが消え、ハンバーガーメニューのみが表示されるような作りになっており、16pxで制作してすべての項目を横並びにしたら、1100pxのアートボートからははみ出してしまって当然？の作りになっていました。

このような、16pxでグローバルナビの文字を横並びにした場合に1100pxからはみ出してしまうようなサイトの場合には、Illustrator上ははみ出して作成してもよいものでしょうか？

お礼日時：2025/01/06 19:45

No.2 回答者： かわごえ 回答日時： 2025/01/06 13:16

何が原因。

。。
スタイルシートだと思います。