カテゴリー別アーカイブ: スタッフのひとりごと

[Adobe CC]Adobe Fonts を使用してみよう!Web編

なかなか梅雨が明けませんね。
おかげで家の空調代がかからずに少し助かっています。

駅までの坂道がつらくて初めての電動アシスト自転車を買いましたが、この天気でなかなか乗れていないスタッフ「ほ」です。

さて、前回のエントリーではスタッフ「の」がAdobe Fontsについてご紹介しました
で、そこで「DTP編」とついていたので、本人に「次回はWeb編を書くの?」と聞いたら「いえ、スタッフ「ほ」が書くと期待して…」という答えが返ってきてしまったので、今回のお題は…

「Adobe Fontsを使用してみよう Web編」としてお送りします。

フォント指定はCSSのfont-familyで

まずはWebサイトを作成するときのフォント指定の基本からおさらいしていきます。

Webサイトを作成する際、私たちがフォントの指定をおこなわないと、それぞれのブラウザが自分の好きなフォントを割り当てることになっています。

例えばIEならMS Pゴシック、Win版のChromeならメイリオ、といった具合です。

フォントの指定をする場合はCSSのfont-familyプロパティを使います。

body {font-family:Meiryo;}

ただし、例えばWindowsとMacintoshでは入っているフォントが異なったりしますので、カンマで区切って複数のフォントを第一希望、第二希望といった感じで指定をするのがセオリーです。

body {font-family:”Hiragino Kaku Gothic ProN”,Meiryo,sans-serif;}

閲覧者側のPCにもフォントが必要

ただ、Webのフォント指定で問題なのは、Webサイトを作る人のPCではなく、閲覧する人のPC内からフォントを呼び出して表示するため、閲覧者のPCに指定したフォントが入っていないと、望み通りのフォントで表示されません

PCにインストールされているフォントは、OSやバージョンによってさまざまです。

そう考えると、すべての人に同じフォントを見せるのはなかなか難しいことなのです。

Webフォント

そこで考え出されたのがWebフォントです。

Webフォントは、フォントをあらかじめインターネット上のサーバーに置いておき、閲覧者のPC内からではなく、このインターネット上のWebフォントを読み込んでもらうことで、すべての人に同じフォントを表示させようとする仕組みです。

Adobe FontsをWebフォントで利用する

Adobe CCユーザーが利用できるAdobe FontsもWebフォントとして利用が可能です。
しかも、利用方法はとってもカンタン。

ざっくりと使用までの流れをご紹介します。

前回、スタッフ「の」がご紹介している方法でAdobe Fontsの一覧ページに移動したら、画面右上にある「日本語モード」をクリックすると日本語フォントのみが表示されるようになります。

一覧から自分の使いたいフォントを探しますが、この時「サンプルテキスト」欄に任意の文字を入力すると、そこで入力された文字列が各フォント見本として置き換わります。イメージがつかみやすくなります。

利用したいフォントが決まったらフォントの説明下部にある</>をクリックします。

画面に「新規Webプロジェクトの作成」というダイアログが開きますので、「OK」をクリックしましょう。

次の画面では「新しいプロジェクト名を入力」欄に任意の名前を入力し、「作成」をクリックします。

次の画面でソースコードが発行されます。上の赤枠の中身をコピーしてHTMLファイルの~の間に貼り付けます。

下の赤枠内に表示されたCSSの設定をCSSコードに追加します。

以上で設定は完了です。

サンプルページを用意いたしました。下記リンクから確認してみてください。

サンプルページ

とってもカンタンですね。

Adobe Fontsには素敵なフォントがたくさん。
ぜひぜひ皆様も試してみて下さい。

バンフートレーニングスクールでは、ホームページの作り方を教える講座も開講中です!
HTMLとCSSを使ってホームページ作ってみませんか?
スマートフォンに対応したレスポンシブWebデザインサイトを作る講座もありますよ!

Web制作講座の詳細はこちら

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Adobe Fonts を使用してみよう!]

今回はとても使い易くなってると評判の「Adobe Fonts」DTP編って事でいってみます。
以前「Typekit」と呼ばれていたサービスがグレードアップして名称が変更になりました。
「Typekit」時代、プランによって使用できるフォント数に制限があったりと少し複雑な部分がありました。
「Adobe Fonts」は、制限もなく分かり易くなってます。そして使い方も簡単です。

まず「Adobe Creative Cloud」アプリから「フォント」をクリックします。
(Adobe IDでサインインを忘れずに)

「フォントを参照」をクリックするとブラウザソフトが立ち上がり、フォント一覧が表示されます。

後は使用したいフォントを「アクティベート」→「アクティブ」にしていくだけです。
太さ違い等、複数ある場合はその数が表示されています。
一気にアクティブにもできますし、選んでアクティブもできます。

更に「フォントパック」から入れば、一気にアクティブも可能です。

Adobe Creative Cloudアプリで沢山のフォントがアクティブになっている事が確認できます。

アクティブにすると様々なアプリで使用可能となり、InDesignの「OpenType機能」も使用できます。

【注意点】


フォントはPCにインストールされる訳ではなので、Adobe CCの契約が切れれば使用できなくなります。


DTPで使用の場合、AiやIDのネイティブファイルでの入稿は印刷屋さんに対応状況を確認した方が良いです。
(会社のセキュリティ都合上オフラインで使用してる場合があります)

さて「Adobe Fonts」の話ではないのですが、5月に「Adobe CC」関して「2つのメジャーバージョンのみが導入できるようにする」と発表がありました。
「Adobe CC」は、CS6以降の全バージョンが使用できる。というのも1つの売りだった気がするのですが、今後PCの買換え等ある場合は注意した方がよさそうです。
既に現状、CC2019と2018のどちらかしかインストールできません。
(Illustratorの場合、23がCC2019、22がCC2018です)

バンフートレーニングスクールでは、インデザインが最短2日間で習得できるハンズオントレーニングをご用意してお待ちいたしております。
無料体験も行っておりますので、ぜひお気軽にご参加ください。

インデザイン講座詳細

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

2016年~2017年 年末年始スクール休業日のお知らせ

こんにちは、バンフートレーニングスクールです。

年末年始スクール休業日/受付時間のご案内です。

ご迷惑をおかけいたしますが、宜しくお願い申し上げます。

 

★☆ 年末年始のスクール休業日のお知らせ ★☆

年内最終受付 : 2016年12月28日(水) 18時迄

休業期間 : 2016年12月29日(木) ~ 2017年1月4日(水)

★☆★★☆★★☆★★☆★★☆★★☆★★☆★★☆★★☆★

休業期間中のお申込・ご予約・お問い合わせ等は、

2017年1月5日(木)以降に順次ご返信いたします。

通常時よりもご返信にお時間を頂く場合がございます。
予めご了承ください。

 

◆◇お申込は、ホームページから年中無休24時間受付中◇◆

☆ スクールホームページ(お申込) ☆

http://www.vanfu-vts.jp/entrylist.php

☆ 開講スケジュール ☆

https://www.vanfu-vts.jp/cgi-bin/course/schedule.php

ご不便ご迷惑をおかけいたしますが、ご理解賜りますよう

お願い申し上げます。

 

2016年も残すところ僅かでございます。

本年もバンフートレーニングスクールをご愛顧いただき誠にありがとうございました。

来年も皆様のスキルアップをお手伝いできるようスタッフ一同努めて参りたいと思います。

 

2017年もどうぞよろしくお願い致します。

寒暖の差の激しい近日ではございますが、皆様お体にお気をつけて

どうぞ素敵な新年をお迎えください!

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

2016年12月のマンスリーギフト

早いものでもう12月!
街に一歩出ればクリスマスムード一色ですね。

 

クリスマス、年末年始とイベントいっぱいの12月ですが、

これも忘れてはいけません。

 

大掃除!

 

「毎年、お正月にいらっしゃる新しい年神(としがみ)様の為に
家屋をきれいに清め、門松やしめ飾りで飾ってお迎えの準備をする。」

というのが大掃除の意味だと聞いていますので
寒いですが来年の運気アップの為に頑張りたいところです。

 

 

さて、掃除をすると出てくるのが未分類の写真や手紙やカード等の小物類。
今回のマンスリーギフトはそれらを整理するBOXです!

img_4027

シンプルなデニム地のプリントなのでシールを貼ってアレンジしても良いですね!

 

 

持ち帰りたいけどかさばるのは・・・という方の為に
未組み立ての状態でもお渡ししています!
(※組み立て方は⇒こちらのページをご参照ください)
皆様の整理整頓にお役立て頂ければ嬉しいです!

 

 

 

無料体験講座を受講してマンスリーギフトを貰っちゃいませんか?

ポストカード制作体験講座、パンフレット制作体験講座、

ホームページ制作体験講座からお好きな講座が選べます!

★無料体験講座お申込み★

http://www.vanfu-vts.jp/lesson_e/index.html

12月マンスリーギフトの組み立て方

マンスリーギフトを未組み立ての状態でお持ちになった方への作り方になります。

こちらを参考にお作り下さい。

箱はハサミやのり、テープなどは一切使わず組み立てられます。

紙で手が切れてしまうのが心配な方は手袋をご着用頂いてお作り下さいね!

 

 
ビニール袋から出していただくと、
このような状態になっているかと思います。

1

 

入っているものは 箱本体が1体と仕切り板、大1枚、小1枚です。

 

3

 
箱の本体を広げるとこのようになります。

2
組み立てはこの写真だと奥側の縦に伸びた方から行いましょう。

 

 

1、一番奥から山折り、谷折り、山折り、谷折りと4本目のスジまで
折り目を入れます。
(・山折り⇒凸側が上にくる ・谷折り⇒凸側が下にくる)

4

※写真はクリックすると大きいサイズでご覧いただけます

 

 

そのままたたむとこんな感じです。

5

 

 

2、折りたたんだ左隣にある三角の羽の部分を折ります。
内側の③のスジから谷折り、谷折り、山折りです。
(写真の手で押さえている右側の羽のようにして下さい)

6

 

 

 

3、折り目をつけた羽を立てていきます。
角の三角の所(写真の丸印)は内側にくるように折りたたんで下さい。

7

 

 

4、そのまま、1番で折り目を付けたところを折り込んでいくと
この写真のようになります。

8

 

 

5、さらに手前の羽に折り目をつけます。
2番と同じように内側の③のスジから谷折り、谷折り、山折りです。

9

 

 

 

6、折り目を付けた羽を立てていきます。
3と同じように角の三角は内側に折り込みます。
ここが一番難しいのでがんばって下さい!

10

 

 

 

7、羽を立てたら4で余った端っこを折り込みます。

11

 

 

 

8、7の反対側も内側に織り込んで、
丸印の所を繋げます。

12

13

 

 

9、あとは両端の羽を内側に折り入れれば箱の完成です!

14

15

 

 

10、仕切り板(大)は中央が山になるように、
(小)はスジに沿って幅を半分に折りツメを穴に差し込んでおきます。

16

 

 

11、大きい仕切り板を箱にセットします。

17

 

 

12、続けて仕切り板の溝を合わせて(大)と(小)を組み入れれば…

18
(※ハガキを収納する場合は仕切り板の(小)は使いません。)

 

完成です!

19

 

 

 

ご不明な点等ございましたら、

スクールまでお気軽にお問い合わせください!

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ