Tag Archives: おすすめ

おすすめに表示させる記事

【密着】WEBデザイナーの1日 2020年10月06日 投稿者：リッキー Illustrator Photoshop デザイン

こんにちは！

はじめまして、今年の7月よりデザイナーとして

中途入社いたしましたWEBデザイナーの福井力斗(フクイ　リキト）と申します。

今日はWEBデザイナーの1日を紹介していきます。

WEBデザイナーの1日の流れが知りたい！
どんな業務を行っているの？
お昼とかどうしているの？
残業とかは？

この記事をみていただくとざっくりわかっていただけると思います。
ではさっそくいってみましょう！

let’s go！

9:00~9:30 出社

朝は９：３０から全体の業務が始まるのでみなさんそれまでに出社しています。

自分はそれまで自分のスキルアップのための勉強時間として８：００〜８：３０には出社するようにしています。

朝がゆっくりなので通勤ラッシュを避けることができるのは最高ですね！
あと、服装も自由！私服通勤！最高！

２０％の確率で掃除のおばちゃんに遭遇しますが気にしません。

いつも綺麗にしていただいてありがとうございます。

ですが朝一の挨拶は大切
誰もいなくても元気に挨拶！
挨拶はとても大事

９：３０〜　業務スタート

今日1日することをチャットワークで共有して業務を開始します。

自分は主に案件ごとのサイトデザイン・バナー制作・サポートを行っています。

週に２回は全員で集まって
全員でミーティングをして進捗状況を全員で把握するようにしています。

デザイナーは1人で動くことが多いイメージでしたが

まったくそんなことはなく、チームで動くことのほうが多いので

情報の共有はすごく大切です。

調べてもわからないことは実務の中で教えていただけます。

できたものは優しい先輩達にフィードバックをもらったりしています。

フォントのチョイスや、配置、配色、文字組、イラストなどの

レビューをもらいます。

だいたい２～５稿くらいのやりとりがあります。

その場で不安を解消できるので安心して業務に取り組むことができます！

１２：００〜１５：００　お昼休憩

この時間の間ならいつでも好きな時間にお昼休みをとってもいいことになっています。

お昼時の混む時間を避けられるので
みなさん外に食べに行ったりコンビニで買ってきて食べたりしています。

今日はマーサーブランチギンザテラスに食べにきました。

お昼は時間との勝負…

並んでいたので本当に残念ですが断念して
エッグスンシングス銀座店にしました。

テラス席で優雅なランチ
撮影を手伝ってくれたアンディー先輩と優雅なお昼のひととき

ドリンクも美味しくいただきました

1時間のお昼休憩がおわると業務にもどります。

写真加工前と加工後のビフォーアフター

↑背景がごちゃごちゃしていて人に視線がいかない

↑人と文字に目がいくようになった。お洒落・かっこいい。僕カッコいい

↓加工の解説はこちらに詳しくまとめています↓

【WEBデザインでカッコいいメインビジュアルの作り方】

１８：３０　退社

定時ピッタリで退社できることがほとんどなので
業務後の時間に余裕があり週末にもしっかり休むことができます。

終わった後は友人とご飯に行ったり会社のメンバーとご飯にも行けますね！

最高！

自分は何も予定がない時は自分のスキルアップのために時間を当てています

最後に

入社して２ヶ月がたちました
ほんっとにあっという間で日々楽しく過ごせています。

すぐに案件の担当もさせてもらい責任感とやりがいしかありません！！

努力を評価してくれる環境が揃っているので
モチベーションにもなっています。

一つ上の仕事ができるように日々スキルアップして楽しみながら
成長してTORATを盛り上げていきたいと思います！

以上、WEBデザイナーの1日でした！

ありがとうございました！

【NEW】フレックスボックスで柔軟なレイアウトつくり 2020年05月10日 投稿者：ヨッシー css

Flexbox(フレックスボックス)は、CSSの新しいレイアウト技法で、ブロック要素を簡単に横並びにすることができます。従来のfloat-leftで横並びするよりも遥かに便利です。※特にレスポンシブ時に◎

今回は、Flexboxのさまざまな使い方をご紹介します♪

フレックスコンテナ(親要素)の特性

設定	設定の説明
display:flex	子要素を横並びにすることができます
flex-direction	子要素の並ぶ方向を指定できます
flex-wrap	子要素を一行、複数行に並べることができます
justify-content	子要素同士を等間隔で並べることができます
align-items	子要素の位置する高さを指定できます

フレックスボックスの基本設定

「ブロック要素」は親要素に、display:flexを追加してください。

「インライン要素」の場合は親要素に、display:inline-flexを指定します。

記述例

<style>
/* ブロック要素の場合 */
    #flexbox{
      display:flex; 
    }

/* インライン要素要素の場合 */
    #flexbox{
      display:inline-flex; 
    }

</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

上記の指定をすると子要素がフレックスアイテムになります。

フレックスアイテムを一行、複数行に並べて配置　flex-wrap

flex-wrapを指定するとフレックスアイテムを一行に並べるか、複数行に並べるか指定できます。（display: table-cellみたいなイメージです）

Floatと違い親要素の幅を超えた場合でも改行しませんので、新たにプロパティを追加する必要があります。

設定	設定の説明
flex-wrap:nowrap	子要素を1行に収めることができます
flex-wrap:wrap	子要素が一行に収まらない際に複数行にすることができます
flex-wrap:wrap-reverse	子要素が一行に収まらない際に複数行にします ※順番を逆にして配置

記述例

<style>
    #flexbox{
      display:flex; 
      flex-wrap: wrap;
    }   
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

フレックスアイテムを1行に収めることができます

フレックスアイテムが一行に収まらない際に複数行にすることができます

POINT）flex-wrap:wrapを指定していない場合、子要素にwidth:30%を設定すると縮んで一行に収まります。

記述例

<style>
    #flexbox{
      display:flex; 
      flex-wrap: wrap;
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

縮んで一行に収まります

フレックスアイテムの並ぶ方向を指定　flex-direction

flex-directionはフレックスアイテムの並ぶ方向を指定することができます。

POINT）奇数だけ逆向きの指定をすれば、とても簡単に互い違いのレイアウトにすることができます。

設定	設定の説明
flex-direction:row	子要素を左から右に配置できます
flex-direction:row-reverse	子要素を右から左に配置できます
flex-direction:column	子要素を縦（上から下）に配置できます
flex-direction:column-reverse	子要素を縦（下から上）に配置できます

flex-direction:row

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:row
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を左から右に配置できます

flex-direction:row-reverse

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:row-reverse
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を右から左に配置できます

flex-direction:column

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:column
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を縦（上から下）に配置できます

flex-direction:column-reverse

記述例

<style>
    #flexbox{
      display:flex; 
      flex-direction:column-reverse
    }
    .box-item{
      width:30%;
    }    
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

子要素を縦（下から上）に配置できます

フレックスアイテム同士を等間隔に並べて配置　justify-content

justify-contentはフレックスアイテムをどのように配置するか指定できます。たとえば、左寄せにしたり中央寄せ（フレックスアイテムは等間隔のまま）にすることができます。

設定	設定の説明
justify-content:flex-start	主軸の始点に配置します(デフォルト）
justify-content:flex-end	主軸の終点に配置します
justify-content:center	主軸の中央に配置します
justify-content:space-between	両端から均等に配置します
justify-content:space-around	主軸に対し均等間隔に配置します

justify-content:flex-start(デフォルト)

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:flex-start
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の始点に配置します(デフォルト）

justify-content:flex-end

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:flex-end
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の終点に配置します

justify-content:center

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:center
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸の中央に配置します

justify-content:space-between

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:space-between
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

両端から均等に配置します

justify-content:space-around

記述例

<style>
    #flexbox{
      display:flex; 
      justify-content:space-around
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

主軸に対し均等間隔に配置します

フレックスアイテムの位置する高さを指定　align-items

align-itemsを指定するとフレックスアイテムの位置する高さを揃えたりできます。たとえば、ヘッダーなどで使い勝手がいいです。

設定	設定の説明
align-items:stretch	交差軸の始点から終点まで伸縮する(初期値) ※heightを設定していない場合
align-items:flex-start	交差軸の始点に配置する
align-items:flex-end	交差軸の終点に配置する
align-items:center	交差軸の中央に配置する
align-items:space-baseline	交差軸のベースラインに配置する

align-items:flex-start

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:flex-start
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の始点に配置します

align-items:flex-end

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:flex-end
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の終点に配置します

align-items:center

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:center
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸の中央に配置します

align-items:space-baseline

記述例

<style>
    #flexbox{
      display:flex; 
      align-items:space-baseline
    }
</style>

  <div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>             
  </div>

交差軸のベースラインに配置します

フレックスアイテム(子要素)の特性

設定	設定の説明
order	フレックスアイテムの並べる順番をどうするか指定するプロパティ
flex-grow	フレックスアイテムを他の要素と比べてどのくらい伸ばすか指定するプロパティ
flex-shrink	フレックスアイテムを他の要素と比べてどのくらい縮めるか指定するプロパティ
flex-basis	子要素の幅を指定できます。 ※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先。
flex	flex-grow、flex-shrink、flex-basisを１つにまとめて記載できます

フレックスアイテムの順番を入れ替え Order

フレックスアイテムの順番をばらばらに入れ替えるすることができます。

記述例

  <div id="flexbox">
    <div class="box-item" style="order:3">1</div>
    <div class="box-item" style="order:4">4</div>
    <div class="box-item" style="order:5">2</div>
    <div class="box-item" style="order:1">3</div>
    <div class="box-item" style="order:2">5</div>               
  </div>

このように順番を指定できます。

フレックスアイテムの幅を指定　flex-basis

flex-basisは、widthと同じ意味です。※flex-basis、widthがどちらとも設定されている場合は、flex-basisの設定値が優先されますのでお忘れなく。

記述例

  <div id="flexbox">
    <div class="box-item" style="flex-basis:30%;">1</div>
    <div class="box-item" style="flex-basis:30%;">2</div>
    <div class="box-item" style="flex-basis:120px;">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>               
  </div>

イメージ画像

フレックスアイテムを伸ばす範囲を指定　flex-grow

フレックスコンテナー内の残っている空間のうち、どのくらい伸ばすか (フレックス伸長係数) を設定します。※残りの空間とは、フレックスコンテナーの寸法からすべてのフレックスアイテムの寸法を引いたものを指します。

記述例

<div id="flexbox">
    <div class="box-item">1</div>
    <div class="box-item" style="flex-grow:0">2</div>
    <div class="box-item" style="flex-grow: 1;">3</div>
    <div class="box-item" style="flex-grow: 2;">4</div>
    <div class="box-item" style="flex-grow: 3;">5</div>               
  </div>

イメージ画像

フレックスアイテムを縮める範囲を指定　flex-shrink

フレックスアイテムの縮小係数を指定できます。初期設定値(伸縮なし)は「0」です。

<div id="flexbox">
    <div class="box-item" style="flex-shrink:1">2</div>
    <div class="box-item" style="flex-shrink:1">2</div>
    <div class="box-item" style="flex-shrink:1;">3</div>
    <div class="box-item" style="flex-shrink:2;">4</div>
    <div class="box-item" style="flex-shrink:2;">5</div>               
  </div>

イメージ画像

いかがでしたでしょうか。

参考になれば感激です。

【第一弾】コピペだけ！CSSで実装できるホバーデザイン集 2020年03月12日 投稿者：ヨッシー css デザイン: みなさん、こんにちは！ TORATのよっしーです！

今回はWEBデザインに必要不可欠なマウスオーバーのデザインをいくつかご紹介させていただきます。リンクボタンをマウスオーバー（カーソルを置く）した際に、色やスタイル、大きさなどを変化させたり、 CSSだけで様々な動きを加えることができます。簡単に実装できますので、ぜひWEBサイトに使用してユーザビリティをアップさせましょう！

カラーチェンジ

マウスオーバーすると一瞬で色が変わります

See the Pen gOpvdNE by ヨッシー (@yoshida123) on CodePen.

プッシュアップ

マウスオーバーすると上にあがります

See the Pen abOqRoL by ヨッシー (@yoshida123) on CodePen.

プッシュダウン

マウスオーバーするとボタンを押したように下がります

See the Pen RwPQYXq by ヨッシー (@yoshida123) on CodePen.

プッシュタイプ

クリックするとボタンが下がります

See the Pen wvayYwV by ヨッシー (@yoshida123) on CodePen.

ボーダータイプチェンジ

マウスオーバーすると線のタイプが変わります

See the Pen YzXeJzJ by ヨッシー (@yoshida123) on CodePen.

スローチェンジ

マウスオーバーすると徐々に色が変化します

See the Pen rNVJqam by ヨッシー (@yoshida123) on CodePen.

ボーダーカラーチェンジ

マウスオーバーすると線の色が変わります

See the Pen wvayYKw by ヨッシー (@yoshida123) on CodePen.

グラデーション

マウスオーバーするとグラデーションがスタートします

See the Pen qBdxJNK by ヨッシー (@yoshida123) on CodePen.

コーナーチェンジ

マウスオーバーするとが角が変化します

See the Pen ExjQdgo by ヨッシー (@yoshida123) on CodePen.

リフレクション風

マウスオーバーするとガラスに反射したようなエフェクトがかかります

See the Pen dyodgOg by ヨッシー (@yoshida123) on CodePen.

サイドチェンジ

マウスオーバーすると色がサイドからサイドに移動します

See the Pen oNXEaZa by ヨッシー (@yoshida123) on CodePen.

フォントワイドアップ

マウスオーバーするとフォントが広がります

See the Pen zYGRmZp by ヨッシー (@yoshida123) on CodePen.

フォントロール

マウスオーバーするとフォントが縦回転します

See the Pen mdJXzMZ by ヨッシー (@yoshida123) on CodePen.

サイズアップ

マウスオーバーするとサイズが大きくなります

See the Pen ZEGrqoa by ヨッシー (@yoshida123) on CodePen.

サイズダウン

マウスオーバーするとサイズが小さくなります

See the Pen ZEGrqqv by ヨッシー (@yoshida123) on CodePen.

アピールデザイン

マウスオーバーするとサイズが大小で変化します

See the Pen RwPQeMX by ヨッシー (@yoshida123) on CodePen.

ライトスプレッド

マウスオーバーすると光が広がります

See the Pen bGdLmxw by ヨッシー (@yoshida123) on CodePen.

いかがでしたでしょうか。

好きなホバーエフェクトはありましたか？こういったアニメーションはクリック率アップなどに効果的ですのでぜひ積極的に使っておしゃれで面白いWEBサイトを制作してみてくださいね！

Illustratorで制作したイラストを塗りなしの線画化に！ 2020年03月12日 投稿者：ナタリア Illustrator デザイン: Adobe Illustratorでパーツを組み合わせてイラストやアイコンを制作すると便利ですよね。修正するときにも、直したいパーツだけを選択すれば簡単に修正でき、操作時間も短縮できます。でも、制作したものをパス化して、背景を透明にするために苦労することありませんか？

まず、上記のイラストを見てみましょう。重ねて、組み合わせて、塗りに色を入れて制作することが多いと思います。そういったときは塗りをなしにすればきれいな絵になりませんね。Illustratorを使う上でパスファインダーの「分割」と「合体」を使いこなせていれば大抵のことは効率的にできます。ですが、場合によってはアイコン化したり、線だけのイラストを依頼されたときに有効活用できるのがパスファインダーの「刈り込み」というツールです。今回は、そのツールを使った作業を簡単に2パターンをご紹介したいと思います！

1つ目のパターン

主に刈り込みだけを使用して、簡単に透明背景にするパターンです。パス化したい部分を選択すると重なっている部分があることがわかりますね。塗りなし、パスだけにすると、絵がわかりにくくなります。そこで、“塗りあり”のままでパスファインダーで刈り込みを選択します。ワークスペースにパスファインダーがないときはメニューバーの「ウィンドウ」=>「パスファインダー」で開いてください。

すると、重なっていたところの部分は分割されます。

あとは線の色、太さやパスの微調整をして、完成です！（線のウィンドウの角の形状、線端を利用すると便利です。）

塗りなしにして、背景が何色でも、柄が入っても対応できるイラストになりました。

２つ目のパターン

２つ目のパターンは、塗りなしのパスがあるときの場合です。刈り込みだけではできないので“面の部分”と“線の部分”と二つに分けてやっていきます。この場合、円形の部分(線の部分)とその他(面の部分)と分けました。まずは線がある部分を選択して、分割します。

線の部分が一体化したら、今度は面の部分も選択して、刈り込みをします。この時も塗りに色を付けるのを忘れないでください。

そうすると、きれいに分割され、重なっている部分は無くなります。

終わったら塗りをなしにして、線の色、太さを調整して完成です。どんな背景にでも使えるイラストになりました。

最後に

パス化して、どんな背景にでも対応できるイラストの作り方でした。面があるパーツのみ制作して刈り込みしてから線や細かいところを調整したり、すべて分割して、部分的に合体したり、クリッピングマスクを使ったり、パスを切ったりとやり方は色々です。今回は様々な方法の中、私が便利と思う「刈り込み」を紹介させていただきました。ぜひIllustratorの機能を活用してください。

サブセット化で日本語Webフォントの容量を軽量化する方法 2020年02月14日 投稿者：アンディ デザイン

Webサイトをデザインする際、フォント選びはそのサイトの雰囲気を左右する重要な要素のひとつとなります。

こだわりのあるフォント、おしゃれなフォントをWebサイトに使うことで差別化することができます。 WebサイトにWebフォントを使うことも増えつつあります。

Webフォントを使用するメリット

見栄えが良くなる、デザイン性が高くなる
テキスト表示できるためSEO効果がある
他サイトと差別化できる
どの端末で閲覧しても同じフォントになる
自動翻訳に対応できる

Webフォントの使い方はこちら

Webフォントを使ってWEBサイトのデザインを高める

Webフォント使用の注意点

Webサイトをより魅力的にするWebフォントですが、日本語のWebフォントには最大の問題点があります。それは容量が大きくなってしまうことです。

日本語フォントは含まれる文字数が多いためファイル容量がかなり大きくなります。10MBを超えたりするものもあります。さすがにこれは重すぎて表示するまでに時間がかかってしまいます。表示速度が下がると、検索順位の低下や、閲覧者の離脱につながるため、避けることが望ましいですね。

そんな容量の大きい日本語フォントですが、サブセット化することで容量を軽くする事ができます。サブセット化とは、フォントに含まれる文字の中から必要な文字だけを抜き出しファイルサイズを小さくすることです。

それではダウンロードしたフォントをサブセット化して軽量化する方法をご紹介します。

サブセット化で容量を減らす

好みのフォントをダウンロード

試しにこの棘薔薇フォントというのををダウンロードしました。

それでは容量を確認してみましょう。

なんと16.7MBでした。これはさすがに重い、、

ソフトのインストール

サブセットするにはいくつかのソフトが必要になります。まずは、下記からサブセットフォントメーカーとWOFFコンバータをインストールします。

サブセットフォントメーカー

インストールしたサブセットフォントメーカーを起動してみましょう。

画面は下のようになっています。

サブセットフォントメーカーでは、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化し、ファイルサイズを削減します。

つまり必要なフォントだけを残し使わないフォントは削除します。

「作成元フォントファイル」で今回軽量化するフォントを指定します。
「作成後フォントファイル」は軽量化した後のフォントの保存場所を指定します。
「フォントに格納する文字」は第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを貼り付けます。下記よりコピペしてください。
「作成終了後、WOFFコンバータを起動する」にチェックを入れます。
作成開始でサブセット化します。

フォントに格納する文字

第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがなを下記からコピーし、サブセットフォントメーカーのフォントに格納する文字の部分にペーストします。

https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/edit

WOFFコンバータ

「変換前ファイル」で先程サブセットフォントメーカーで軽量化したフォントを指定します。
「変換後ファイル」で変更した後のファイル名を指定します。
「EOTファイルを生成する」でIEに対応したフォントファイルを制作できます。

また、様々なブラウザに対応するため4種類のフォーマットのファイルを作成ことをおすすめします。

.eot
.ttf
.woff2
.woff

10MBを超えるほとんどの日本語フォントは1MB以下に軽量化することができます。

変換後の容量確認

今回例でサブセット化した棘薔薇フォントはサイズを87%減少することができました。

まとめ

こだわりのあるフォントを使用することでサイトをより魅力的にすることができますが、日本語のWebフォントを導入する際は容量に注意する必要があります。

ですが今回ご紹介した方法で容量を軽量化することで問題なくサイトに導入することができます。

日本語フォントを使用するときは必須と言っていいと思います。ぜひ活用しWebサイトのデザイン性を高めてみてはいかがでしょうか。

WordPressプラグインなしでSNS共有ボタンを設置する 2020年01月09日 投稿者：アンディ wordpress

SNSの持つ高い拡散力はブログを運営していく上で無視することはできません。上手に活用することで新しいユーザーの獲得や読者の増加といった機会を大幅に増やすことができます。

WordPressの投稿記事内などの特定の場所にSNSのシェアボタンをプラグインなしで設置する方法を紹介します。

SNSの効果的な使用方法についてはこちら

SNS

余談：プラグインを使わない理由

プラグインを使わない理由は、サイトの読み込み速度が早くなること、自由にカスタマイズができること、プラグインのアップデートによる不具合の干渉を受けないことなどがあります。

より軽快にサイトが表示されれば検索順位も上げられますよね。

また、プラグインの脆弱性からサイトを攻撃される恐れもあるとか。
なんせできる限りプラグインは使わないということを目指した方がよさそうです。

SNSボタンをまとめたsns.phpを作成する

まずは、SNSボタンをテンプレートとして使用するために”sns.php”など任意の名前をつけたPHPファイルを作成します。下記のコードをコピペしたPHPファイルをWordPressのテーマ内に設置しておきます。

こうすることで好きな場所に一行のコードで設置することができます。

下記は「Facebook」「Twitter」「LINE」「はてなブックマーク」の4つのSNSシェアボタンを設置するためのコードとなっています。

sns.phpファイルを作成

<?php
$url_encode=urlencode(get_permalink());
$title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name');
?>

<div class="share">
<ul>
    <!--Facebookボタン-->
    <li class="facebooklink">
     <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
       
    <i class="fa fa-facebook"></i><span> facebook</span>
    </a>
    </li>

    <!--ツイートボタン-->
    <li class="tweet">
    <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;">
      <i class="fa fa-twitter"></i><span> tweet</span>
    </a>
    </li>

    <!--LINEボタン-->
    <li class="line">
    <a href="//social-plugins.line.me/lineit/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
        <span>LINE</span>
	</a>
    </li>

    <!--はてなボタン-->
    <li class="hatena">
    <a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span>
    </a>
    </li>
</ul>
</div>

SNS共有ボタンのアイコンにFontAwesomeのWebアイコンを表示させています。FontAwesomeを使用する設定を行っていない場合はWebアイコンを利用する設定を行ってください。

CDNで利用するには、下記のリンクをheadタグに追加します。

headタグに追加

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

CSSでデザインを整える

次にCSSを使って装飾を行いましょう。下記にはデザイン例を載せましたので好みにカスタマイズしてください。

レスポンシブ対応も忘れずに行いましょう。@mediaを使用するには viewportの設定を行ってください。

CSSスタイルシートに追加

.fa-hatena:before {
    font-family: Verdana;
    font-weight: bold;
    content: 'B!';
}

.share {
    margin-top: 40px;
    margin-bottom: 40px;
    margin-right: 3em;
}

.share ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.share ul:after {
    display: block;
    clear: both;
    content: '';
}

.share li {
    float: left;
    width: 25%;
    margin: 0;
    margin-top: 15px;
}

.share li a {
    font-size: 14px;
    display: block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}

.share li a:hover {
    opacity: .8;
}

.share li a:visited {
    color: #fff;
}

.tweet a {
    background-color: #55acee;
}

.facebooklink a {
    background-color: #315096;
}

.line a {
    background-color: #00b900;
}

.hatena a {
    background-color: #008fde;
}

@media screen and (max-width:768px){
    .share li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3px;
    }
    
    .share li i {
        font-size: 1.3em;
        padding-top: 3px;
    }
    
    .facebooklink i, .tweet i, .hatena i {
        display: none;
    }
}

CSSで下記のようなボタンにしました。

はてなブックマークはFontAwsomeにアイコンがないので、似ているフォントで代用してアイコンにしています。

デザイン例

使用頻度の高そうな「Facebook」「Twitter」「LINE」「はてなブックマーク」を設置しましたが、他に追加するとしたらGoogle+はサービス終了したしPocketとかFeedlyくらい？

あと、スマホ用ではアイコンをdisplay:none;にして文字のみの表示にしましたが、逆にしてアイコンのみの表示にしてもいいかと思います。

sns.phpに追加

<li class="pocket">
    <a href="//getpocket.com/edit?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;">
    <i class="fab fa-get-pocket"></i><span>Pocket</span>
	</a>
</li>

CSSスタイルシートに追加

.pocket a{
    background-color: #EF4156;
}

@media screen and (max-width:768px){
    .share li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 3px;
    }
    
    .share li i {
        font-size: 1.3em;
        padding-top: 3px;
    }
    

    .facebooklink span, .tweet span, .hatena span{
        display: none;
    }
}

デザイン例

ちなみにFontAwsomeのLINEとPocketのアイコンは有料となっています。

記事内にSNSボタンを設置する

投稿記事内や、任意の場所にSNSボタンを表示させるには下記のコードを一行追加するだけで設置する事ができます。

<?php get_template_part( 'sns' ); ?>

‘sns’には制作したファイルの名前が入ります。先程「sns.php」という名前のファイルを作成したので「sns」と記述します。

WordPressの投稿記事に設置したい場合は「single.php」に追加します。

もちろん投稿記事以外の他の場所にも設置することができます。テンプレートを作っていおけば一行のコードを記述するだけでいろんな場所で読み込めるため便利です。

【密着】WEBデザイナーの1日

9:00~9:30 出社

９：３０〜 業務スタート

１２：００〜１５：００ お昼休憩

写真加工前と加工後のビフォーアフター

１８：３０ 退社

最後に

【NEW】フレックスボックスで柔軟なレイアウトつくり

フレックスコンテナ(親要素)の特性

フレックスボックスの基本設定

フレックスアイテムを一行、複数行に並べて配置 flex-wrap

フレックスアイテムを1行に収めることができます

フレックスアイテムが一行に収まらない際に複数行にすることができます

フレックスアイテムの並ぶ方向を指定 flex-direction

flex-direction:row

flex-direction:row-reverse

flex-direction:column

flex-direction:column-reverse

フレックスアイテム同士を等間隔に並べて配置 justify-content

justify-content:flex-start(デフォルト)

justify-content:flex-end

justify-content:center

justify-content:space-between

justify-content:space-around

フレックスアイテムの位置する高さを指定 align-items

align-items:flex-start

align-items:flex-end

align-items:center

align-items:space-baseline

フレックスアイテム(子要素)の特性

フレックスアイテムの順番を入れ替え Order

フレックスアイテムの幅を指定 flex-basis

フレックスアイテムを伸ばす範囲を指定 flex-grow

フレックスアイテムを縮める範囲を指定 flex-shrink

【第一弾】コピペだけ！CSSで実装できるホバーデザイン集

カラーチェンジ

プッシュアップ

プッシュダウン

プッシュタイプ

ボーダータイプチェンジ

スローチェンジ

ボーダーカラーチェンジ

グラデーション

コーナーチェンジ

リフレクション風

サイドチェンジ

フォントワイドアップ

フォントロール

サイズアップ

サイズダウン

アピールデザイン

ライトスプレッド

Illustratorで制作したイラストを塗りなしの線画化に！

1つ目のパターン

２つ目のパターン

最後に

サブセット化で日本語Webフォントの容量を軽量化する方法

Webフォントを使用するメリット

Webフォントの使い方はこちら

Webフォント使用の注意点

サブセット化で容量を減らす

好みのフォントをダウンロード

ソフトのインストール

サブセットフォントメーカー

フォントに格納する文字

WOFFコンバータ

変換後の容量確認

まとめ

WordPressプラグインなしでSNS共有ボタンを設置する

余談：プラグインを使わない理由

SNSボタンをまとめたsns.phpを作成する

sns.phpファイルを作成

headタグに追加

CSSでデザインを整える

CSSスタイルシートに追加

デザイン例

sns.phpに追加

CSSスタイルシートに追加

デザイン例

記事内にSNSボタンを設置する

９：３０〜　業務スタート

１２：００〜１５：００　お昼休憩

１８：３０　退社

フレックスアイテムを一行、複数行に並べて配置　flex-wrap

フレックスアイテムの並ぶ方向を指定　flex-direction

フレックスアイテム同士を等間隔に並べて配置　justify-content

フレックスアイテムの位置する高さを指定　align-items

フレックスアイテムの幅を指定　flex-basis

フレックスアイテムを伸ばす範囲を指定　flex-grow

フレックスアイテムを縮める範囲を指定　flex-shrink