Illustratorでwebデザインの制作(既存サイトのデザインリニューアル)を行っています。
フォントサイズの調整がうまくいかず、教えてください。
当方デザインのみの担当で、コーディングは別の会社の方が担当されます。
webデザイン初心者です。
参考に、ある会社のHPのスクリーンショットを取りました。
そのスクリーンショットを、Illustratorの1100pxのアートボードに幅を合わせて貼りました。
スクリーンショットの見た目のフォントサイズに合わせようとすると、グローバルナビは7pxになってしまいます。
しかし、そのHPのグローバルナビは16pxのフォントサイズで作られています。
同じ16pxにすると、大きすぎになります。
これは何が原因でしょうか?
添付の画像は、黒文字はHPのスクリーンショット内の文字、赤字はIllustratorで入力したものとなります。

A 回答 (4件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
>このような、16pxでグローバルナビの文字を横並びにした場合に1100pxからはみ出してしまうようなサイトの場合には、Illustrator上ははみ出して作成してもよいものでしょうか?
もしもこれまでのレイアウトを踏襲してかまわないということであれば「はみ出してかまわない」という回答になります。
これはクライアントとの確認事項になるわけですが、面倒なら1100px内に収めるレイアウトも考えておくことが前提かなあと思います。
ただ、コンテンツ幅が1100pxだとしても、1101px以上で表示されるケースはゼロじゃないことを考えます。
自分としては「少なくとも横幅1200px以上のアートボードで1100pxのコンテンツをレイアウトする」と思います。
提案方法次第ですけれども、横幅1366pxとか。
No.3
- 回答日時:
スクリーンショットをアートボードに合わせたんですか?
ではスクリーンショットが拡大・縮小のいずれかになっているわけですよね。
スクリーンショットをアートボードに合わせるのではなく、原寸サイズで貼るのが正しい作業です。
余った部分はマスクで隠すといいですよ。
横幅1,100pxの長方形オブジェクトを作って、スクリーンショットの上にのせる。
縦方向は天で揃える。
横方向は中央で揃える。
どこまで揃えられるかはスクリーンショットの取り方によって変わるので、ある程度目分量になる可能性はあるけれども、中央で揃える。
で、マスクをかける。
この状態でアートボードに貼れば、16pxは16pxで表示できるはずです。
現状は原寸の43.75%縮小がかかっている状態ですから、グローバルナビに16pxを当てても大きすぎるのは当然ではないかなあと思います。
アドバイスをありがとうございます。
やっと理解できました。
YouTubeの参考サイトを見て、webサイトのスクリーンショットをコピペして下敷きにする方法(配置の参考にする方法)で作成していたのですが、その過程で何か勘違いをしてしまっていたようです。
該当のサイトは、web表示画面の箱を小さくすると、グローバルナビが消え、ハンバーガーメニューのみが表示されるような作りになっており、16pxで制作してすべての項目を横並びにしたら、1100pxのアートボートからははみ出してしまって当然?の作りになっていました。
このような、16pxでグローバルナビの文字を横並びにした場合に1100pxからはみ出してしまうようなサイトの場合には、Illustrator上ははみ出して作成してもよいものでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(悩み相談・人生相談) 大手企業のHP制作など◆YouTuberを想定した動画編集研修あり【WEBデザイナー/動画編集】 【 1 2024/05/13 11:50
- Web・クリエイティブ Webデザインや広告制作について質問です。 バナー広告、POPデザイン、Webデザインなど色々あると 4 2023/11/25 09:20
- Web・クリエイティブ モリサワ提供のAdobeフォントについて 2 2024/02/28 22:10
- Illustrator(イラストレーター) Illustratorについて教えてください Illustratorを使い始めてまだ1週間も経ってい 2 2024/07/08 00:04
- Illustrator(イラストレーター) Illustratorで困っていて…お勧めのパソコンはありますか? Illustratorでデザイン 5 2023/12/19 23:16
- デザイン オリジナルデザイン、何に使ったら? Illustratorでデザイン制作をしています。 2,3年後、 3 2024/01/01 11:57
- Web・クリエイティブ チラシやフライヤー、バナーを適度にダサいデザインで作成するコツについて 1 2023/01/14 15:54
- 画像編集・動画編集・音楽編集 プリントパック入稿用テンプレートは、無料ソフトでも利用できるか? 4 2023/06/09 12:30
- HTML・CSS webデザインの勉強で、HTML/CSSから勉強するかPhotoshop/Illustratorかは 4 2024/06/14 12:36
- Web・クリエイティブ webデザインについてです。 カラー、フォント、写真フィルターのコーディネートが参考になる書籍や記事 1 2023/11/08 09:33
このQ&Aを見た人はこんなQ&Aも見ています
-


Webサイトの「デザインのみ(コーディング不要)」を依頼されました。 「レスポンシブデザイン」を希望
HTML・CSS
-


Macでの変換
Mac OS
-


イラストの評価お願いします。 絵が好きな小学生です。
美術・アート
-
-
4

ウエブサイトについて、詳しい方に質問です。現在、小さな掲示板を運営しているのですが、Dreamhos
ホームページ作成・プログラミング
-
5

イラストってキャラクターにしろ背景にしろ、 基本的にハード円ブラシとソフト円ブラシがあれば何でもかけ
Illustrator(イラストレーター)
-
6

簡単な印刷を代行してくれる会社を探しています
Web・クリエイティブ
-
7

HTML&CSSとHTML5&CSS3の違いについて。
HTML・CSS
-
8

画像処理について教えてください‥‥遠近法で建物をパース的にしたいのですが
Photoshop(フォトショップ)
-
9

ホームページビルダーで作った古いサイトってこの先何年メンテナンス無しで閲覧できますか? 亡くなった父
ホームページ作成・プログラミング
-
10

<OFFICE>フォントを教えてください
Word(ワード)
-
11

パソコンを起動させたらこの画面が出ました。もう一度起動させたら直ったのですが、この画像の時は一時的な
Windows 7
-
12

ホームページ作成に伴い、元データの場所・リニューアル方法
ホームページ作成・プログラミング
-
13

index.htmlがうまく反映されない
HTML・CSS
-
14

パソコン 数年前にネットで買ったノートパソコンが久々につけると、ライセンスぎれでオフィスが使えません
ノートパソコン
-
15

フォント名の日本語名称を教えてください!ShinMGo DeBold-83pv-RKSJ-H
デザイン
-
16

プログラマー達は何故、プログラムを入れるフォルダーに容量制限があるのを知らない?
C言語・C++・C#
-
17

踏切での一時停止について 本音で回答をお願いします。 一般的な普通の踏切で一時停止をするのは当たり前
運転免許・教習所
-
18

超大至急…ほんとに助けてください…
皮膚の病気・アレルギー
-
19

MacBook Airを検討しています。 オンラインでの習い事に使用のためです。 そこで質問させて頂
Mac OS
-
20

一人暮らしで食費5.5万円ってそんなに貧しいのですか? ニュースによると貧困女子大生は食費に月に55
食費
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Illustratorでオブジェクトの色...
-
イラスト、AIで全て任せても大...
-
イラストレーターで、面積を出...
-
Illustratorで白い部分のみを透...
-
●Illustrator CMYKをRGB変換し...
-
プロパティパネルを元に戻したい
-
aiデーターのアウトライン化後...
-
イラストレーターの面積を求める
-
上質紙、マット仕上げの名刺に...
-
ゲーム背景のトレスはトレパク...
-
パソコンで言う イラストレータ...
-
Illustratorのデータを人に渡す...
-
イラストレーターが買えない
-
イラストレーターでの印刷について
-
イラストレーターで添付画像の...
-
イラストレーター使い方難しす...
-
ワードのイラストをイラストレ...
-
突然すみません。 このイラスト...
-
イラストレーターで文字の加工
-
PDFファイルの色変換
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
イラストレーターで、面積を出...
-
Illustratorでオブジェクトの色...
-
上質紙、マット仕上げの名刺に...
-
●Illustrator CMYKをRGB変換し...
-
パソコンで言う イラストレータ...
-
マティスみのりやまと EBに似て...
-
プロパティパネルを元に戻したい
-
イラストレーターの面積を求める
-
イラレでCMYKをDICに変換すると...
-
イラストレーターで添付画像の...
-
突然すみません。 このイラスト...
-
Illustratorで白い部分のみを透...
-
IllustratorのaiファイルがMac...
-
画像を添付して、それをもとに...
-
WIN10 PAINT の手のひらツール...
-
ゲーム背景のトレスはトレパク...
-
aiデーターのアウトライン化後...
-
この卒業黒板アートの作成方法...
-
PDFファイルの色変換
-
Illustrator『リアルタイムプレ...
おすすめ情報























