スタッフブログ

menu

XDでコーディング代行・外注するときの注意点

2022年10月4日

こんにちは。コーディングの代行・外注をしています、株式会社だいずらぼの脇本です。

最近、AIやPSDに加えて、XDでデザインを入稿していただくことが増えてきています。

先日、このようなことがありました。

XDで入稿、デザインされた文字（文字のフォント自体はよくあるデバイスフォントだけれども、ならびや文字の大小など画像で扱うのが適当そうなバナーというか、メインビジュアル）があるデザインでした。

この場合、多くのケースでは、SVGで画像書き出しをして、画像として配置をしますが、画像で書き出しているつもりが、フォントが見ているデバイスによってことなるのです。

iPhoneでみると明朝系で、PCでみるとゴシック系。また、画像（だと思っている）なのに、改行位置も異なりました。

よく調べてみると、SVGで書き出した場合、アウトライン化した文字は、ベクターデータとして画像になりますが、そうでない文字は、文字列としてSVGの中に埋め込まれるんです。なので、SVGで画像（ベクターデータ）にしたつもりでも、文字なんです。

ロゴなどを、SVGで切り出しているケースは、アウトライン化した後に切り出ししないと、もしかすると別のデバイスで観たときには、全然違う形で表示されているかもしれませんので、気をつけましょう。一度、チェックしてみてください。

また、よくあるご質問で、XDだとアウトライン化できないでしょ？とか、XDはアウトライン化必要ないと仰る方がいますが、必ず、アウトライン化したデータも入稿してください。

AIで入稿される方は、おそらく、グラフィックデザイン出身の方が多いと思いますので、当然のごとくアウトラインしていただけますが、WEBデザインから始められた方は、あまりその習慣がないと思います。より良いデザイン、より良いサイトを制作するためにも、ご協力のほどお願いいたします。

年末年始の営業状況のお知らせ

2021年12月20日

いつも、コーディング代行・外注サービスのコーディングパックをご利用いただきまして、ありがとうございます。

冬季休暇のお知らせです。

2021年12月25日～2022年1月3日までは、冬季休暇をいただきます。

研修のためお休みさせていただきます。

2021年8月25日

みなさんこんにちは。

研修のため
9月2日(木)～9月6日(月)を休業とさせていただきます。
9月7日(火)より通常営業いたします。

休業中も作業は可能ですので、案件がございます場合は、
お休み前にご連絡ください。

誠に申し訳ございませんが、
休業中のお電話でのお問合せは受け付けておりません。
メールでのお問合せは順次対応いたします。

ご迷惑をおかけし申し訳ございませんが何卒ご理解の程宜しくお願い致します。

アスペクト比とは

2020年10月26日: 皆様はアスペクト比というものをご存じでしょうか。聞き覚えはあるけど、何かといわれると説明できないという人も多いのではないでしょうか。

そこで今回は、その様な方々に向けて「アスペクト比」について詳しく解説していきます。

アスペクト比について

アスペクト比とは、簡単にいうと「スクリーンの横と縦の長さの比」の事です。アスペクト比「〇〇：〇〇」というように「横：縦」の比率で表示します。通常、縦と横の比は、縦横ともに最小の整数になるように表されます。

スクリーンサイズが100インチでアスペクト比が4：3のスクリーンの場合、横と縦の長さがそれぞれ2033mmと1525mmのスクリーンという事になります。

インチについて

アスペクト比は、通常インチという単位で表されます。インチとは「ヤード・ポンド法」で表された長さの単位の一つ (ヤード・ポンド法では、長さの単位として、フィートやヤードという表し方もある) です。1インチ＝25.4mmで、TVなどのサイズを表す際は、対角線の長さに該当します。つまり、100インチのTVというのは、スクリーンの対角線が2540mmのTVのことです。
日本では長さを表す際は「メートル法」を用いることが多いため、馴染みのない人も多いかもしれません。長さの単位として「メートル」の他に、「インチ」というものがある事を覚えておきましょう。

代表的なアスペクト比

アスペクト比は、映像を制作する人が自由に設定できます。しかし、作成する映像の種類によって、頻繁に使用される代表的な比率があります。ここでは代表的な4つを紹介します。

16：9(ワイド)

これは、主にTVやYouTubeなどに採用されている比率で、「ワイド比率」とも呼称されます。映像視聴に向いたアスペクト比と言えます。

2.35：1(シネスコ)

映画で採用される比率で、「シネマスコープ」を略して「シネスコ」と呼ばれています。

16：10(WXGA)

「WXGA」とは「Wide eXtended Graphics Array)」の事で、4：3のXGA比率を横に拡張したような比率になります。TVが、正方形に近いブラウン管から、横に長い液晶テレビに移り変わる中で流行ってきた比率です。

4：3(スタンダード)

こちらは、最近は徐々に減ってきていますが、アナログテレビや古いPCのスクリーンなどに採用されていた比率です。

まとめ

今回は、アスペクト比について解説しました。

アスペクト比とは、スクリーンサイズにおける横縦比の事で、使用する映像の種類によって代表的な比率が存在します。

また、サイズを表す「インチ」が同じスクリーンだとしても、アスペクト比が異なれば、形状やサイズは全く違うものになるという事も覚えておきましょう。

【コーディング用語集】コメントアウト

2020年10月19日: コメントアウトとは、プログラムのソースコード上で一時的に「実行させない部分」のことです。
一部分をコメントタグで囲んで無効化することを「コメントアウトする」というように使われます。

パンくずリストが必要な理由

2020年10月19日

Webサイト制作をしていると「パンくずリスト」という言葉を目にすることがあると思います。
パンくずリストは、サイトのユーザリビティを向上させるためにも重要なものです。
そこで今回は、パンくずリストが必要な理由について解説します。

パンくずリストとは？

パンくずリストとは、ウェブサイト内でのウェブページの位置を、視覚的にわかりやすく表示したリンクのリストのことです。
このページのタイトル上部にも表示している「コーディング代行のコーディングパックＴＯＰ > ブログ記事 > スタッフブログ > パンくずリストが必要な理由」のようなものをパンくずリストと呼びます。

なぜパンくずリストは必要なのか？

必要な理由は、2つあります。

1つ目の理由は、ウェブサイトのユーザビリティを向上させるためです。
パンくずリストがあることで、ユーザーはウェブサイト内のどのページを見ているのか視覚的にわかりやすくなります。
特にページ数が多いサイトは、パンくずリストがあることでサイト内の階層構造が分かりやすくなります。
上位の階層に移動しやすいため、サイト内での回遊性が高くなり、ユーザーの滞在時間も長くなります。

2つ目の理由は、SEOを強化するためです。
パンくずリストを設置すると、クローラーがサイトの情報を収集する際に効率的にクローリングすることができます。
ブラウザで上位表示するには、クローラーに効率よく情報を提供しなければいけません。
パンくずリストがあることで体系的な構造のサイトとなりクローラーに把握されやすくなるため、SEOの強化につながります。
実際に、パンくずリストを設置するだけで検索結果が上昇する場合もあります。

パンくずリストを設置するときの注意点

SEOを強化するためには、パンくずリストを適切に作成しなくてはいけません。
パンくずリストを作成する際には、カテゴリの構成を明確にし、カテゴリにSEOキーワードが含まれるように設計します。
パンくずリストはそれぞれの関連性も重要です。ユーザーがサイトの構造を直感的に判断することができるよう、上下の階層は関連のあるカテゴリーにしましょう。
また、パンくずリストは基本全てのページに設置します。ただし、トップページなどには設置しなくても良いです。

まとめ

パンくずリストは、ユーザーがサイト内のどこに位置しているのかを分かりやすくするリンクのリストのことです。
ウェブサイト内に正しくパンくずリストを設置することで、SEOを強化し検索結果を上げることができます。
パンくずリストを設置する際には、ユーザーの視点となって作成するようにしましょう。