コラム - 株式会社DOL

【Adobe XD】コンポーネント機能でデザイン制作を効率化しよう

みなさんはAdobe XDでデザインを作成する時、コンポーネント機能を使っていますか？

Webサイト制作ではヘッダーやナビゲーション、見出しやボタンなど複数ページで繰り返し使用されるパーツを数多く制作します。それらを一つ一つページに設置していると、いざ修正が発生した時にもう一度修正したパーツを設置し直さなくてはいけません。修正の度にこのような作業をしていては時間がかかりますし、何より非効率です。

繰り返し使用されるデザインパーツをコンポーネント化しておけば、修正が発生した時も1回の作業ですべてのパーツを修正することができます。また、コンポーネントでパーツ管理をしておくことはデザイン作業だけでなく、のちのコーディング作業の効率化にも繋がります。

今回はそんな便利なAdobe XDのコンポーネント機能について紹介しようと思います。

1. コンポーネントとは
 1-1. コンポーネントの作り方
 1-2. インスタンスのオーバーライド
 2. コンポーネント活用のポイント
 2-1. メインコンポーネントの管理
 2-2. レスポンシブサイズ変更
 3. おわりに

1. コンポーネントとは

「コンポーネント（component）」とはCSS設計でもよく使われる言葉で、「構成要素、部品」といった意味があります。Adobe XDのコンポーネントはWebページの中で繰り返し使用されるデザインパーツを管理する機能になります。

コンポーネントを使うメリットは冒頭でお話した通り、大元のパーツを修正すればすべてのパーツに修正が反映されるということです。コンポーネント機能を使用することでデザインパーツを一元管理することが可能になり、各ページの修正にかかる手間を大幅に省略することができます。

1-1. コンポーネントの作り方

XDのコンポーネントの作成方法はとても簡単です。見出しやボタンなど、コンポーネントにしたいオブジェクト（またはグループ）を作成したら、そのオブジェクトを選択した状態で右クリックし「コンポーネントにする（Command + K）」を選択するだけです。

この最初に作成されたコンポーネントのことを「メインコンポーネント（親）」と呼び、これが大元のパーツとなります。各ページにはメインコンポーネントをコピー＆ペーストしたものを配置していきます。このメインコンポーネントのコピーを「インスタンス（子）」と呼び、メインコンポーネントに変更を加えると、すべてのインスタンスに同じ変更が適用されます。

コンポーネント化されたオブジェクトは緑の枠で表示されるようになります。メインコンポーネントとインスタンスの見分け方は、左上にある菱形で判別することができます。

1-2. インスタンスのオーバーライド

見出しやボタンなどは使い回すにしても、配置するページによってテキストやサイズを変更したい場合がありますよね。XDではインスタンスに独自の変更（オーバーライド）を加えることができます。

オーバーライドの種類として、テキスト、画像、サイズ、アピアランス（カラー、枠線等）といったものがあり、例えば見出しのテキストだけを変更する、ボタンの幅だけを変更する、カードのサムネイルだけを変更する、といったことが可能です。

オーバーライドはそのインスタンスのみに適用される変更なので、メインコンポーネントや他のインスタンスには一切影響がありません。また、オーバーライドしたインスタンスでも、変更を加えた要素以外はメインコンポーネントとの同期を継続してくれます。

2. コンポーネント活用のポイント

ここからは実際にコンポーネント機能を使用する上でのポイントをご紹介します。

2-1. メインコンポーネントの管理

メインコンポーネントの管理は専用のアートボードを用意して一箇所にまとめておくことをオススメします。

デザイン制作をしているとアレもコレもとコンポーネントに登録してしまい、気付いたら各アートボードに散らばってしまいがちです。散らばっていると、今どのパーツを管理しているのかわかりづらく、同じコンポーネントを作成しようとしたり、インスタンスと間違ってメインコンポーネントを修正するといったエラーの原因になります。

一箇所にまとめておくことで全体のデザインパーツを常に把握できるほか、コーディングや書き出しもしやすくなります。

2-2 レスポンシブサイズ変更

見出しやボタンなどページによって幅や高さを変えて（オーバーライド）使用したいコンポーネントは、「レスポンシブサイズ変更」をあらかじめ設定しておく必要があります。

例えば見出しのデザインにアイコンや下線を施している場合、アイコンは左端に固定して下線の幅だけを変形したいですよね。この設定をきちんとしておかないと、インスタンスのサイズを変更した時に意図しない崩れ方をしてしまいます。

コンポーネント化する際は「レスポンシブサイズ変更」で、位置やサイズを固定しておくもの、変形させるものを合わせて設定しておきましょう。

3. おわりに

今回はAdobe XDのコンポーネント機能について紹介しました。XDのコンポーネント機能は年々進化しています。今回の記事では紹介しませんでしたが、現在は新たに「ステート機能」が追加されており、コンポーネントに複数の状態（初期/ホバー/トグル）を追加できるようになりました。

今後もますます便利になっていくと思われますが、そんな新機能もしっかり活用できないと宝の持ち腐れになってしまいます。今までの使い方をただ続けるのではなく、新機能をきちんとチェックしてデザイン制作に活かしていきましょう！

「transition」設定でデザインをリッチに仕上げるポイント

ボタンやナビゲーションメニューといったリンク付きのコンポーネントを実装する際には、hover設定（マウスオーバー時の設定）を行うことが多いと思います。リンクであることが分かりやすいよう見た目・アクションを整えるのはUI作成の基本でもありますよね。（意図がある場合は別ですが）

そして、このhover設定にはデザインをリッチに見せるために意識しておくと良いポイントが隠れています。些細なポイントにはなりますが、今回はこのhoverアクションにスポットを当てて、お話ししていきたいと思います。

1. hover時のtransition設定

1-1. transitionを設定してリッチさをプラス

1-2. transitionの設定方法

2. 背景色をグラデーションカラーにしたときの注意点

3. おわりに

1. hover時のtransition設定

hover（マウスオーバー）した際に色や見た目を変更する設定をした場合、単純にカラーやサイズに変化を加えるだけで終わらせず「transition」を併せて使用すれば、滑らかに変化するアニメーション効果を施すことができます。

transitionとは
“トランジション (transition) は、要素の2つの状態間の変化を定義するためのものです。”

MDN引用: https://developer.mozilla.org/ja/docs/Web/CSS/transition

1-1. 「transition」を設定してリッチさをプラス

例えば下二つのボタンについて、印象の違いを比べてみてください。（パソコンでご覧ください）

設定なし設定あり

左が「transition」設定なしのボタン、右が「transition: 0.8s」を設定したボタンです。

「transition」を設定した方がパッと色が切り替わるよりどことなく余裕があって優雅な雰囲気を感じませんか？

もちろんパッと色が切り替わるのは良くないというわけではなく、あくまでデザインテイストやテーマに合わせ意図に沿っていることが大切です。

1-2. transitionの設定方法

「transition」は以下4つのプロパティを一括指定できるショートハンドプロパティです。

　transition-delay:　トランジション効果が始まるまでの待ち時間を指定
　transition-duration:　アニメーションが完了するまでの所要時間を秒数またはミリ秒数で指定
　transition-property:　トランジション効果を適用するCSSプロパティを指定
　transition-timing-function:　変化の度合い（中間状態の値を算出する方法）を指定

効かせたい要素に「transition」を設定します。

.sample:hover { transition: 0.3s; }

上のようにショートハンドで記述する注意点として、さらにプロパティの指定をしておくのがベターです。というのも、何も指定しないと初期値allが効くため、意図しない動きを発生させたりバグにつながる可能性があります。

/* プロパティまで指定する */
.sample:hover { transition: opacity 0.3s, transform 0.3s; }

hover時に滑らかに変化させたいのがopacityやtransformだけの場合、上のように記述すると指定したプロパティだけにアニメーションが作用するので安心です。

2. 背景色をグラデーションカラーにしたときの注意点

残念なことに、背景色をグラデーションカラーにしたときは上述のhover時に「transition」設定しただけではアニメーションが効きません。

しかし少し工夫すればグラデーションカラーの背景色を使用した場合にもちゃんと「transition」を効かせることができます！「擬似要素（before, after）」を使用したり、「background-position」を活用したりといくつか手段が取れるので、また次回ご紹介できればと思います。

3. おわりに

今回は普段何気なく設定しているhoverアクションにスポットを当て、意識・工夫することでデザインのリッチさを少し向上させるポイントについてシェアしました。

些細な点ではありますが、こうした点の積み重ねで全体の良さを底上げしていけると思いますので、ぜひ意識して制作していきましょう！

【WordPress】ショートコードの作り方と使い方２種

WordPressのエディタではHTMLやCSSは記述できますが、基本的にPHPを使うことができません。
「エディタで編集したいけどPHPは使えないな・・・」というときにショートコードを使えば、エディタからでもPHPを使用することができます。

また、使いまわしたいパーツがあるけど「何回も書くのが面倒だな・・・」というときにショートコードにしておくことでサイト制作を時短することができます。

そこで今回は、テンプレートファイルをショートコードとして呼び出す方法と、function.phpに書いたボタンを呼び出す方法を紹介していきます。

1. ショートコードとは

2. 作り方と使い方①〜テンプレートファイルをショートコードとして使用する〜

2-1. function.phpへの記述

2-2. WordPress管理画面にショートコードを記述

3. 作り方と使い方②〜任意のボタンをエディタ上で使用する〜

3-1. function.phpへの記述

3-2. WordPress管理画面にショートコードを記述

4. おわりに

1. ショートコードとは

ショートコードとは、[ myphp file=’index’ ]というような短いコードのことです。

冒頭でも説明した通り、テンプレートファイルに書いた長い記述を繰り返し使い回したり、エディタでは使用できないPHPをショートコード化することで呼び出すことができます。

2. 作り方と使い方①〜テンプレートファイルをショートコードとして使用する〜

2-1. function.phpへ記述

function my_php_Include($params = array()) { 
　extract(shortcode_atts(array('file' => 'default'), $params)); 
　ob_start(); 　include(STYLESHEETPATH ."/$file.php"); 
　return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');

※myphp部分は自分の好きな名前に変更可能です。

2-2. WordPress管理画面にショートコードを記述

上の画像はindex.phpに記述したものをショートコードで呼び出しています。

myphp 部分にはfunction.phpで記述した名前を記述してください。
index 部分は呼び出したいテンプレートファイルの名前を入れます。(拡張子phpは省略)

こちらでショートコードの呼び出しは完了です。

3. 作り方と使い方②〜任意のボタンをエディタ上で使用する〜

3-1. function.phpへ記述

function shortcodeButton( $atts, $content = null ) {
　return'’. $content .'’;
}
add_shortcode('shortcode-button', 'shortcodeButton');

※shortcode-button部分は自分の好きな名前に変更可能です。

※shortcodeButtonは関数の名前で、自分の好きな名前に変更可能です。

3-2. WordPress管理画面にショートコードを記述

shortcode-button 部分にはfunction.phpで記述した名前を記述してください。

最後にfunction.phpに記述したclassにスタイルを当ててデザインするとボタンの完成です。
これでこのボタンを使いたい時にショートコードを書くだけで呼び出せるようになります。ボタンの他にも使いたいパーツをショートコード化しておくことでサイト制作にかかる時間を大幅に短縮することができます。

ボタン

3. おわりに

いかがでしたでしょうか？
とても簡単に任意のPHPをショートコードで呼び出すことができました。「エディタで編集したいけどPHPは使えないな・・・」という問題が解決できたと思います。
この記事が日々のサイト制作のお役に立てれば幸いです。

【Adobe XD】Webデザイナーに必須の便利なプラグイン5選

DOLではサイトのワイヤーフレームやデザインを「Adobe XD」で作成しています。動作が軽くて標準機能だけでも十分便利なXDですが、「プラグイン」を活用することで、さらに作業効率を上げることができます。

今回は「XDのプラグインはまだ使ったことがない」「数が多くてどのプラグインを使えばいいのかわからない…」といったビギナーの方向けに、プラグインの追加方法とWebデザイナーに必須の便利なプラグインを５つ紹介いたします。

1. プラグインの追加方法

2. XDのおすすめプラグイン

2-1. Adjust Size by Shortcut

2-2. Artboard Plus

2-3. Icons 4 Design

2-4. Ratio Changer

2-5. Resize Artboard to Fit Content

3. おわりに

1. プラグインの追加方法

XDのプラグインの追加方法はとても簡単です。

まず、XDを起動したら画面左下にあるプラグインアイコンをクリックして、プラグインパネルを開きます。続いてプラグインパネルの右上にある「＋」アイコンをクリックします。

すると、以下のようなCreative Cloudアプリのマーケットプレイスの画面が表示されます。検索窓に追加したいプラグイン名を入力して、検索結果に出てきたプラグインの「インストール」ボタンをクリックしたら追加完了となります。

2. XDのおすすめプラグイン

プラグインの追加方法がわかった所で、日頃の業務で使用しているおすすめプラグインを紹介します。

2-1. Adjust Size by Shortcut

キーボードの矢印キーでオブジェクトのサイズ調整ができるプラグインです。

これまではオブジェクトのサイズ調整をするのに、毎回、画面右側のプロパティインスペクターで、幅と高さの数値を打ち込んでいましたが、このプラグインを利用してからは手入力で調整することはほぼ無くなりました。

長方形や楕円形といったオブジェクトの他に、リピートグリッドやアートボードのサイズを調整することもできます。数値入力の手間が省けることで大幅に作業効率がアップするので、今回紹介するプラグインの中で一番おすすめしたいプラグインです。

2-2. Artboard Plus

バラバラに配置されているアートボードを自動でグリッド状に整列してくれるプラグインです。

ページ数の多い大規模サイトを作成していると、アートボードが乱雑になりがちですよね。このプラグインを使用すると、複数のアートボードを自動でグリッド状に整列してくれます。また、設定画面で整列時のアートボード間の余白を指定することも可能です。

ただ整列するだけでなく、アートボード外に置かれた要素からアートボードを作成したり、レイヤーパネルに表示されるアートボードの一覧をアルファベット順にソートするといった機能もあります。

2-3. Icons 4 Design

XD上でアイコン素材を検索して追加することができるプラグインです。

様々なサービスのフリーアイコン素材が5000種類以上も用意されています。これまではブラウザでブックマークしていた配布サイトから一つ一つアイコンをダウンロードしていましたが、このプラグインを追加することで、簡単にXD上に配置することができます。

アイコンはSVG画像のため、色の変更や線の太さも変更することができます。ただし、アイコンを検索する時は英語で入力する必要があるので、そこだけ注意です。

2-4. Ratio Changer

四角形や楕円形といったシェイプのアスペクト比を、黄金比（1.618：1）や白銀比（1.414：1）に変換してくれるプラグインです。

画像を配置する時、縦横比について迷うことってありますよね。デザインの意図に沿ってきちんと計算されたものであれば良いですが、もし感覚だけで決めていたのであれば、このプラグインを利用することをオススメします。規律に沿ったアスペクト比に自動でリサイズしてくれるので、キレイなレイアウトを作成することができます。

2-5. Resize Artboard to Fit Content

内包するオブジェクトに合わせて、アートボードをリサイズしてくれるプラグインです。

ワイヤーフレームやデザインを作成する時、作業しやすいようにアートボードのサイズを広めに用意しておくと、完成時にアートボードを一枚一枚リサイズするのが面倒ですよね。特にアートボードのサイズ調整は内包しているオブジェクトに対してスナップが効かないので、手動で合わせていくとかなり大変です。

このプラグインを使用すると内包するオブジェクトに合わせて、複数のアートボードをまとめてリサイズしてくれるので非常に便利なのでオススメです。

3. おわりに

今回はWebデザイナーに必須のAdobe XDプラグイン５選を紹介しました。

今までXDのプラグインを使ったことのない方の中には「これが自動でできるんだ！」と思うプラグインもあったのではないでしょうか。整列やリサイズといった手間のかかる作業は、誰しもが抱える共通課題なので「面倒な作業だな」と思った時は、一旦手を止めて対応方法を調べてみましょう。有志によって作成されたプラグインで、すでに解決されているかもしれません。

サイト制作は完成までの道のりが長いので、便利なプラグインはどんどん活用して作業の効率化を図っていきましょう！

【WordPress】カテゴリー、タグ、タクソノミー、タームの違いが分からない！

WordPressサイトを構築する過程で出てくる「カテゴリー」や「タグ」、「タクソノミー」、「ターム」といったワードですが、「出力したいデータが出てこない・・どのような構造になっているんだっけ・・」と行き詰まりがちな部分ではないでしょうか。

WordPressテンプレートタグでデータを取得しようにも、「あれ？何を取得すればいいんだっけ？」と混乱することもあると思います。

今回はWordPressサイトを構築する過程で迷いやすい「カテゴリー」や「タグ」、「タクソノミー」、「ターム」の違いについてご紹介します。

1. 呼称が違うだけで全てタクソノミー！

「タクソノミー」も何か一つのものを指していると思いがちですが、「タクソノミー」は包括的な呼称であり、「カテゴリー」も「タグ」も「カスタムタクソノミー」も広義的には全て「タクソノミー」です。それぞれに微妙な違いはあれど、これらは全て投稿記事を分類するために使われます。

「カテゴリー」と「タグ」はWordPressインストール時からデフォルトで入っており
よく目にするため馴染みもあり、イメージしやすい言葉だと思います。

記事をカテゴリー別に分類したいときは「カテゴリー」を使用し、その記事にキーワードを付与し他の記事と関連付けたい場合には「タグ」を使用します（Instagramでいうハッシュタグだと考えればイメージしやすいですよね）。

一方で「カスタムタクソノミー」は自分で追加する機能となるため、カスタマイズして使用する方やホームページ制作業者でないと馴染みがない言葉かもしれません。

カテゴリーが多くない場合はデフォルト装備の「カテゴリー」機能を使用するので足りますが、カテゴリーが多い場合やカテゴリーによって挙動を変えたい時は「カスタムタクソノミー」を使って実装した方が融通が効き便利です。

2. 各呼称の違いはあるの？

それぞれの大きな違いは上のチャートをご覧ください。

カテゴリーとタグの違いは階層構造をもてるかどうか、カスタムタクソノミーはfunctions.phpへの記述やプラグインを使用することで後から自分で追加・作成できるオリジナルのものです。

3. タームはタクソノミーの最小単位！

最後に「ターム」ですが、「タクソノミー」が全てを包括する広義なものであったのに対し、「ターム」は全てに共通する一番小さい単位を指します。

つまり、「カテゴリー」「タグ」「カスタムタクソノミー」のそれぞれに登録されている項目自体を「ターム」と呼びます。

ここを勘違いしていると、“get_term()”を使用すべき箇所で”get_taxonomy()”を指定していたために出力したいデータを呼び出せずに悩むことになる可能性が高いです。

『食べログ』サイトを参考に、分類に何を使用しているかの想定を行ってみると以下のように表示することができます。

4. おわりに

今回はWordPressの「カテゴリー」「タグ」「カスタムタクソノミー」「ターム」についてご紹介しました。混乱しやすいですが落ちついて違いを把握し、理解を深めていきましょう。

「企業らしさ」が十分に伝わる採用サイトデザイン10選

「webデザイントレンド」で検索すると今年はこれがイケてるという記事をよく目にします。
個人のホームページやトレンドに敏感な業種は常に新しさを求めているため、最新のトレンドが重要になってくるかもしれません。
しかし採用サイトはどうでしょうか？
応募する人はきっと「その企業らしさ」を見たいのではないでしょうか？
そこで今回は「企業らしさ」が十分に伝わっていると個人的に感じた採用サイトをまとめてみました。

1.採用サイト紹介

1-1.読売新聞採用サイト

1-2.SMBCグループ採用サイト

1-3.TOMORROWGATE採用サイト

1-4.秋川牧園採用サイト

1-5.BEAR HUG採用サイト

1-6.SHE採用サイト

1-7.博報堂プロダクツ新卒採用サイト2022

1-8.KUMON採用サイト

1-9.星野リゾート採用ページ

1-10.Choki Peta採用サイト【DOL制作物】

2.おわりに

1.採用サイト紹介

1-1.読売新聞採用サイト

新聞社という業種がひと目でわかり、「らしさ」がタイポグラフィで表現されています。
「読売新聞社を形成するもの」、「読売新聞社でできること」ページでは、歴史ある業界でこれからのデジタル社会の中でどのような仕事ができるのかが説明されています。応募者の興味のある分野がいくつかのハッシュタグデザインでリンクされており、どの仕事がしたいのかが見つけやすくなっています。

> 読売新聞採用サイト

1-2.SMBCグループ採用サイト

「いい子になるな、いい個になれ。」というキャッチコピーが印象的なサイトです。
銀行の個性が表現されていて、他の銀行との差別化を感じることができます。
PC版でも右上のハンバーガーメニューにメニューが集約されており、ファーストビューがスッキリとしたデザインになっています。

> SMBCグループ採用サイト

1-3.TOMORROWGATE採用サイト

みた瞬間に「なんだこれは？」と惹きつける力のある採用サイトです。
「終電ギリギリまでの仕事」というページもありブラック企業感満載の見出しですが、内容を確認すると完全自由出勤制をアピールするための見出しだということが分かります。
1ページ構成になっておりアンカーリンクで各見出しに移動することができます。右のサイドバーに見出しが書いてあるのでわかりやすくなっています。

> TOMORROWGATE採用サイト

1-4.秋川牧園採用サイト

ファーストビューを動画にし、牧園で何を育てているのかがすぐにわかるようになっています。
初めて牧園で働いてみようと思ってる人が見てもわかるように動画や写真が豊富に使われています。
TOPページには線画イラストのアニメーションがスクロールで動き、写真だけでは伝わらないアットホームさが表現されています。

> 秋川牧園採用サイト

1-5.BEAR HUG採用サイト

「BEAR HUG」という名前とマッサージをしている店舗ということでサイトの色使いがぴったり合っています。
優しい雰囲気の色合いなのでお店の雰囲気が想像しやすいデザインになっています。
右上に「ENTRY」ボタンがありすぐに応募ができるのでどこから応募するのか迷うことなく応募ができます。

> BEAR HUG採用サイト

1-6.SHE採用サイト

女性の活躍を応援するコンセプトが表現されている採用サイトです。
シンプルで見やすさもあり、おしゃれで読みやすいフォント遣いがとても工夫されているサイトだと思います。

> SHE採用サイト

1-7.博報堂プロダクツ新卒採用サイト2022

「こしらえるって、無敵だ。」のコピーに合った動画がさしこまれておりファーストビューを見るだけで会社が求めている人材が想像できる採用サイトです。
シンプルな作りですが、伝えたいことがファーストビューに詰まっていてとても見やすいサイトだと思います。

> 博報堂プロダクツ新卒採用サイト2022

1-8.KUMON採用サイト

ファーストビューに縦書きのテキストでメッセージが書かれており、伝えたいことを読ませる工夫がされているサイトです。白をベースとしたシンプルなデザイン構成になっています。幅広い仕事内容も部門ごとにまとまっており、とても見やすく掲載されています。

> KUMON採用サイト

1-9.星野リゾート採用ページ

1ページ構成で短いですが、エントリーボタンを押してみたくなるワクワク感を演出しているページです。非日常を演出している星野リゾートらしいストーリー性のあるメッセージで一緒に働く仲間を探しているような親近感のあるページだと思います。

> 星野リゾート採用サイト

1-10.Choki Peta採用サイト【DOL制作物】

イメージカラーの緑を中心にデザインした採用サイトです。
仕事を知るページでは仕事内容はもちろんのことキャリアや教育制度についてなどを詳しく説明しています。
応募する人に興味を持ってもらうだけでなく、応募することへの不安をできるだけ取り除くことのできる採用サイトが作れたのではないかと思っております。

> Choki Peta採用サイト

2.おわりに

いかがでしょうか？
今回は「その企業らしさ」が伝わる採用サイトを紹介しました。素敵な採用サイトはたくさんありますがその中でも10選させていただきました。色々なサイトを見ることによって表現方法を勉強することができます。この記事が日々のデザインワークにお役立ちいただければ幸いです。

【国家資格】ウェブデザイン技能検定の概要や勉強方法まとめ【3級】

今回はWebデザイン唯一の国家資格である、【ウェブデザイン技能検定3級】の概要や、私が実際に行った資格取得のための勉強方法などを紹介しようと思います。

1. ウェブデザイン技能検定とは 2. 試験日程 3. 出題形式及び合格基準 4. 勉強方法おわりに

1. ウェブデザイン技能検定とは

ウェブデザイン技能検定とは、Webデザインに関する唯一の国家資格です。3つの等級区分が設けられており、1級に近づくほど取得難易度は上がります。
試験ではデザイン、プログラミングの両方のスキルを求められますが、デザインに関してのセンスは試験では必要ありません。あくまでもデザインをする上での知識問題が主に出題されています。

ウェブデザイン技能検定は、国家検定制度である技能検定制度の一つとして、
厚生労働省より職業能力開発促進法第47条第1項の規定に基づき指定試験機関の指定を受け、
特定非営利活動法人インターネットスキル認定普及協会（以下、当協会）が実施するものです。

試験は実技および学科試験で実施され、
関連国際標準規格等に基づきウェブデザインに関する知識・技能、実務能力等が問われます。
1級の合格者には厚生労働大臣より、2級及び3級の合格者には当協会理事長より、
ウェブデザイン技能士の合格証書が発行されます。

引用：ウェブデザイン技能検定

2. 試験日程

試験は毎年4回行われています。去年はコロナの影響で3回だったようですが、
今年度の日程は令和3年5月23日（日）、令和3年8月29日（日）、令和3年11月28日（日）、令和4年2月20日（日）となっております。

3. 出題形式及び合格基準

出題形式
学科：2択あるいは4択から選択するマークシート方式
実技：6つの課題から5つ選択し回答する課題選択方式

合格基準
学科：70点以上（100点満点）
実技：70点以上（100点満点：ただし、試験要項に示す各作業分類において配点の60％以上の得点を得ること）

学科は全部で25問出題されるので、18問正解すれば合格となります。

4. 勉強方法

私はすでにウェブデザイン技能検定3級には合格しています。その際の勉強方法を紹介しますので、少しでも参考になれば幸いです。

学科試験
学科試験の過去問はウェブデザイン技能検定の運営である、インターネットスキル認定普及協会が過去3回分を公開しています。
さらに過去の問題は有志でまとめてくださっている方がいますので、私はとにかく過去2、3年分の問題をとにかく解きました。

1. まずは一度過去問を解く。
2. 間違えていた箇所をピックアップし、回答をただ見るだけではなく実際に調べて理解を深める。
3. 次の過去問を解く。
4. 2と同様に間違えていた箇所をピックアップし、回答をただ見るだけではなく実際に調べて理解を深める。
5. 過去2.3年分が終わったらまた最新の過去問に戻る

とにかく過去問を繰り返し解いていると、早い段階で試験の傾向に気づけると思います。
そこまでしなくても、ウェブデザイン技能検定3級は初心者向けで、試験合格率は約60％を超えていますので、肩の力を抜いて試験勉強に励むと良いでしょう。

参考：過去問題の公表 – ウェブデザイン技能検定
 参考：【IT資格】ウェブデザイン技能検定3級に独学で合格! 過去問題を徹底解説

実技試験
実技試験は、会場に用意された検定用のパソコンを使用します。
あらかじめ課題がパソコン内に用意されているので、課題に従って回答します。
実技試験の過去問も筆記試験と同じく過去3回分が公開されているのですが、課題の元となるデータは配布されていないので、協会が用意している練習問題を解きましょう。

参考：練習問題 – ウェブデザイン技能検定

問題自体はimgタグのパスを訂正するなど、サイト制作の入門レベルの簡単な問題が出題されるのですが、
回答を保存するフォルダを自ら作成し、さらにフォルダ名も指定されるので、その辺りだけ間違えないように注意しましょう。
問題の文章をよく読めば間違えることはないと思うので、簡単だからといって気を緩めず、最後まで気を引き締めて試験に挑んでください。
少しでも不安な方は協会が発刊している問題集を購入するのも良いでしょう。

ウェブデザイン技能検定過去問題集3級

おわりに

今回はウェブデザイン技能検定3級の概要や勉強方法についてご紹介しました。
ウェブデザイン技能検定は歴とした国家資格なので取得しておいて絶対に損はありません。
Web制作初心者の方にもおすすめできる検定なので、まだ取得していない方はぜひ挑戦してみてください。

画像収集＆管理アプリ「Eagle」を使用したデザイン学習法

デザインスキルを磨くには、日頃から多くのクリエイティブに触れて、アイデアを蓄積しておくことが大切です。

私は今までインスピレーションの元になりそうなWebサイトを、ギャラリーサイトなどで検索してはEvernoteやPinterestにまとめて管理していました。しかし、数が増えてくると管理することが難しくなり、いざ参考にしたい時に目当てのデザインを見つけることができなくなっていました。

画像管理に向いている便利なツールがないか探していた所、「Eagle」という画像収集＆管理アプリを見つけました。無料体験版を使用してみた所、その便利さに「Notion」と同じくらいの衝撃を受けたことを覚えています。

今回はWebデザイナーのデザイン学習に最適な「Eagle」について紹介いたします。

1. Eagleとは
 2. Eagleをオススメする理由
 2-1. 保存作業が楽
 2-2. 素材管理が楽
 2-3. コメントが書ける
 2-4. 対応フォーマットが豊富
 ３. おわりに

1. Eagleとは

【 Eagle公式サイト】

対応環境：Windows / Mac
価格：$29.95（3,423円 … 2021年11月現在）
1ライセンスで2台のデバイスまで利用可能。

Eagleはオンライン上の画像収集と管理をするアプリです。画像収集とはいっても動画や音声、フォント、テキストファイルなどにも対応しており、デザイン制作に必要な素材をまとめて管理することができます。サブスクリプションサービスではないので、一度購入すれば費用は発生しません。

2. Eagleをオススメする理由

2-1. 保存作業が楽

EagleはChromeの拡張機能「Eagle for Chrome」を利用することで、サイト上の画像をドラッグ＆ドロップするだけで保存できるようになります。また、ページの一部または全部のスクリーンショットもショートカットで実行することができます。Eagleを使うとアイデア収集のスピードが早くなることを実感できます。

・バッチ保存　…　サイトに使用されている画像をまとめて保存できます。（選択することも可）
・エリアをスクショ　…　ページの一部を選択して保存することができます。
・ビジブルエリアをスクショ　…　ブラウザ上で見えている部分だけを保存します。
・ページ全体をスクショ　…　ページ全体を保存します。

2-2. 素材管理が楽

保存した画像はタグで管理することができます。また、タグ以外にも画像の「形」「カラー」「タイプ」「サイズ」などを自動で判別して、絞り込み条件として使用することができます。これらの条件を「スマートフォルダ」機能で設定することで、目当てのデザインを簡単に整理することができます。
表示形式も「ウォーターフォールレイアウト」や「整列レイアウト」など、いろんな見せ方があり、管理するフォーマットに合わせて切り替えできるのも良いです。

私は保存した画像の参考にしたい要素（配色、レイアウト等）や使用されているフォントをタグに登録しています。フォントを登録しておくと、和文フォントと英文フォントの組み合わせや、女性向けに合うフォントなど、現場で使われるパターンを知ることができてデザイン制作に役立っています。

2-3.　コメントが書ける

画像の任意の箇所に感想やコメントを書くことができます。

私はただ画像を保存するだけでなく、なぜこのデザインが良いと思ったのか、その理由を書いておくようにしています。良いと思った理由を言語化しておくことで、自身がデザインしたものをプレゼンする際にも役立ちます。また、これを繰り返すことで、今多く使われている表現や、デザインの規則に気付くこともあります。

2-4.　対応フォーマットが豊富

Eagleは画像だけでなくフォントや音楽、動画まで管理することができます。様々なファイル形式に対応しているため、デザインの素材管理にも最適です。特にWebデザイナーは様々なフォントをPCにインストールしているケースが多いので、どんなフォントを入れていたかを確認するにはEagleは非常に便利なアプリです。

３. おわりに

今回はWebデザイナーにオススメの画像収集＆管理アプリ「Eagle」を紹介しました。

私はこのEagleとNotionを併用することで、デザインとコーディングに関するノウハウを蓄積して、現場で活かすことができるようになったと実感しています。Webデザイナーでデザインの学習法に迷っている方は、ぜひ「Eagle」を試してみてください。（30日間の無料体験版があります）

Eagleでデザインのアイデアを収集して、いつでもアウトプットできる環境を整備しておきましょう！

LPの基本構成を知ろう！-「PASONA（パソナ）の法則」とは-

LP（ランディングページ）とは広義には「ユーザーが最初にアクセスするページ」のことを指しますが、Web業界でのやり取りとしては「1ページ完結型のWebサイト」だったり、「Web広告用のサイト」という意味で使われることが多いのではないでしょうか。

LPの依頼＝「Web広告用のサイト」という意味合いであることがほとんどかと個人的には感じています。つまりそのLP＝「サービス・商品の紹介ページ」を通して、商品へのお問い合わせや購入など、ユーザーのアクションを誘導することが目的となる制作です。

そんなLPには効果的な構成としてある程度決まった型が存在します。制作に携わる方であればすでにご存知の方も多いかと思いますが、本日は『LPの基本レイアウト』についてご紹介します。

LPの基本構成とは
 1. ファーストビューエリア
 2. ボディエリア
 3. クロージングエリア
 おわりに

LPの基本構成とは

LPは大きく分けて以下３つの要素から構成されます。

1. ファーストビュー
2. ボディ
3. クロージング

様々なLPをチェックして、意識しながら要素分けしてみると理解しやすいかと思います。

参考）『クレンジングバームDUO』のLP広告：https://lp.p-antiaging.com/公式duo/クレンジング

それでは一つずつ見ていきましょう。

1. ファーストビューエリア

ファーストビューはLPの中で最重要なエリアです。
LPを訪問した誰もが目にする画面であり、ユーザーの惹きつけ具合によってその後が閲覧されるか直帰されてしまうかが決まります。
ファーストビューは主にメイン画像、キャッチコピー、コンバージョンボタンで構成されています。

キャッチコピー
キャッチコピーは特に重要で、ユーザーにとって魅力的でインパクトのあるものになっていることが必須と言えます。

メイン画像
また、メイン画像も手を抜けません。なぜなら3秒で好きか嫌いかを判断すると言われる人の脳を考えれば、文章より一瞬でイメージを伝えることのできる画像は強力で視覚で訴えることができるためです。

コンバージョンボタン
最後にコンバージョンボタンですが、ここでチェックすべきは興味を持ったユーザーが迷わずアクションしやすいボタンになっているかです。どこへ問い合わせればいいのか分からない、ボタンだと気づかれにくい装飾、ボタンの場所が分かりにくい、などがあっては大変勿体ないことです。せっかく問い合わせたい気分になったユーザーにとっても不親切な展開です。ボタンを目立たせるように工夫し、押したくなるようなボタンを目指しましょう。

2. ボディエリア

ファーストビュー（キャッチコピー）に続くボディエリア（ボディコピー）では、具体的に商品・サービスの魅力を伝えていきます。
ただ魅力やメリットを並べるだけではなく、ユーザーにとってベネフィットが感じられ、それを達成できるものだと理解してもらうことが大切です。

ボディコンテンツを作成する際には、有名な「PASONA（パソナ）の法則」を活用してみましょう。
日本の経営コンサルタントで国際的なマーケッターである神田昌典氏によって提唱されたこの法則は、ボディコピーの型として様々な場所で活用されています。

PASONA（パソナ）は以下の頭文字を取ったものです。
Problem（問題）　　：問題定義・明確化
Agitation（扇動）　　：問題点を煽り立てる
Solution（解決策）　：解決策の提示と証拠、利用者の声など
NarrowDown（絞込）：限定する、締め切りや期間を決めるなどの緊急性、絞り込み
Action（行動）　　　：行動

「PASONAの法則」は人の心理に沿って上手く構成されているため、より自然な流れで購買意欲を掻き立てます。

文章だけが良くて実際届いたら残念だったということのないよう、もしくはとても良い商品なのに伝えることができていないということのないよう調整していきましょう。最終的に買ってよかったと思ってもらえるよう全体を設計することが大切です。

3. クロージングエリア

LPの最後のエリアとなるクロージングでは「今」買いたいと思わせるきっかけ作りを行い訴求します。「PASONA（パソナ）の法則」でいうNarrowDown（絞込）、Action（行動）部分にあたります。
”先着○名様限定” ”今だけ購入者特典あり”など、ユーザーの行動を後押しする要素を加えてみましょう。

おわりに

本日は『LPの基本レイアウト』についてご紹介しましたがいかがでしたでしょうか。
本日の内容はLPだけでなくセールスコピーやコンテンツコピーを行うライターが意識しているポイントとも共通する事柄です。通常ライティングの際にもお役立ていただければ幸いです。