アーカイブ: コラム

Webデザインに使える配色技法 -自然に見える配色と自然に見えない配色-

 

Webデザインの配色を考える上で何気ない配色の法則を知っていると迷うことなく配色ができます。表題にもありますが、今回は自然に見える配色と自然に見えない配色をご紹介します。

目次

1.ナチュラルハーモニーとコンプレックスハーモニー

2.Webデザインにおける活用例
2-1. ナチュラルハーモニーの活用例
2-2. コンプレックスハーモニーの活用例
3.実際に使われている活用例
3-1. ナチュラルハーモニーの活用例
3-2. コンプレックスハーモニーの活用例
おわりに

 

1.ナチュラルハーモニーとコンプレックスハーモニー

山の景色や海の景色をみて「色彩が乱れてるな」とは感じないですよね？それは、今まで生きてきた中で見慣れている色彩だからです。
色彩用語では下記のように言います。
・見慣れていて自然に見える色の組み合わせ＝ナチュラルハーモニー
・見慣れていなくて違和感を感じる色の組み合わせ＝コンプレックスハーモニー

 

自然の色ってなぜ自然に見えるんでしょうか…?
下記の写真を見てみましょう。そうすると次のように説明することができます。
・日の光が当たっているところ＝明るい
・日の光が当たっていないところ＝暗い

 

 

つまり・・・
黄色に近い色が明るく、青紫に近い色が暗い色の組み合わせが「ナチュラルハーモニー」の組み合わせになります。
※明るい＝明度が高い（白を多く混ぜた色）

 

「コンプレックスハーモニー」は黄色に近い色が暗く、青紫に近い色が明るい色の組み合わせになります。

 

ナチュラルハーモニー例

コンプレックスハーモニー例

2.Webデザインにおける活用例

2-1. ナチュラルハーモニーの活用例

上段に黄色寄りの赤、下段に赤を配置しました。
黄色に近い色を明るくすることで自然な色使いに見えます。さらに下段の赤を暗く(黒を混ぜる)ことによって下に重量感が出て、安定感のある色使いになります。

 

2-2. コンプレックスハーモニーの活用例

見慣れない色の組み合わせなので、違和感を感じる方が多いと思います。
webデザインにおいて、コンプレックスハーモニーの配色を使うメリットは、少し違和感を感じるので目に留まりやすくなります。

 

3.実際に使われている活用例

3-1. ナチュラルハーモニーの活用例

資生堂PRIOR

商品に合うピンク色の文字が黄色の明るい黄色を背景にすることで、商品のよさを十分に伝えられている配色になります。

資生堂PRIOR

 

株式会社真面目

優しい黄色ベースの背景により赤色の社名がより映える配色になっています。

株式会社真面目

 

はまだ歯科・小児歯科クリニック

黄色の薄い背景と黄緑の文字がクリニックの清潔さやナチュラルさを表現しています。

はまだ歯科・小児歯科クリニック

3-2. コンプレックスハーモニーの活用例

DOL制作物 – Cherishホームページ
右下のPAGE TOPのボタンが目立つように配色されています。

Cherish

 

Choco-ne

黄色寄りの赤に黒を混ぜた茶色の文字がチョコレートをうまく表現しており、さらにラムネフレーバーを連想させる爽やかな青を薄く背景にすることによって洗練された配色になっています。

choco-ne

 

道路標識

日常の中で見られる標識は誰にでも見やすいように設計されています。こちらの標識は赤に青の配色で目に止まりやすく運転手に注意して見てもらえる配色になっています。

道路標識一覧 – 国土交通省

おわりに

配色を意識することで効果的な色使いにすることができるようになったり、知識として知っておくことで時短で配色ができるようになると思います。この記事を参考に少しでも日々のデザインワークや業務の役に立てていただけたら幸いです。

実際に『Prepros』を使ってサイトを作ってみた。【初級編】

 

以前ご紹介したコンパイルツール『Prepros』ですが、みなさんは使っていますか？

 

前回はPreprosの機能についてご紹介してみましたが、今回は実際にPreprosを使って簡単なWebサイトを作成してみようと思います。

目次

1. Preprosとは
2. 実際にサイトを作ってみよう
2-1. プロジェクトを作成する
2-2. 必要なフォルダ、ファイルを作成する
2-3. ファイルをコンパイルする
3. PugとSCSSを使ってみよう
3-1. Pugを使ってみよう
3-2. SCSSを使ってみよう
3-3. プレビュー機能を活用しよう
おわりに

 

1. Preprosとは

Preprosは様々な言語をコンパイルしてくれるGUIツールです。

主な機能は以前紹介しているのでこちらの記事をご覧ください。

 

https://dol.co.jp/column/sass%e3%82%84pug%e3%82%92%e3%82%b3%e3%83%b3%e3%83%91%e3%82%a4%e3%83%ab%e3%81%97%e3%81%a6%e3%81%8f%e3%82%8c%e3%82%8b%e4%be%bf%e5%88%a9%e3%81%aa%e3%82%a2%e3%83%97%e3%83%aa%e3%80%8eprepros%e3%80%8f/

 

ダウンロード先：https://prepros.io/downloads

対応環境：macOS,Windows,Debian Linux

言語：英語のみ

料金：基本無料(無料版ではポップアップが表示されます。)

 

2. 実際にサイトを作ってみよう

2-1. プロジェクトを作成する

まずは作業フォルダを作成します。

場所は問いませんので空のフォルダを作成してください。

今回私はデスクトップに[Prepros]というフォルダを作成しました。

 

フォルダの作成が完了したら、Preprosを起動します。

起動したら「+Add Project」をクリックし、先程作成したフォルダを選択するとプロジェクトに追加されます。

プロジェクトに追加されると、空だったフォルダ内に「prepros.config」ファイルが作成されます。

このファイルにはPreprosの設定などが格納されており、他者にフォルダごと渡してしまえば再度Preprosの設定をすることなく作業を引き継ぐことができます。

「prepros.config」は削除しないようにしましょう。

 

2-2. 必要なフォルダ、ファイルを作成する

追加したプロジェクト上で右クリックをすると直接Visuals Studio Code(以下VSCode)を開くことができます。

VSCodeでサイト作成に必要なファイル、フォルダを作成しましょう。

この時、ただHTMLとCSSファイルを作成してしまうとPreprosを使用する意味がありません。なので今回はPugとSCSSを使用してサイトを作ってみます。

 

今回私は「pug」フォルダ内に「index.pug」ファイル、「scss」フォルダ内に「style.scss」ファイルを作成しました。

 

2-3. ファイルをコンパイルする

フォルダ、ファイルの作成が完了したら、いよいよPreprosのコンパイル機能を使用します。

Preprosを開きリロードします。リロード方法はプロジェクト名の上で右クリック→「Refresh Project」もしくは、command+Rでリロードすることができます。

リロードすると先程作成したフォルダ、ファイルがPrepros上で反映されているので、まずはpugファイルをコンパイルしてみましょう。

index.pugをクリックします。すると右側に設定画面が現れますので必要に応じて変更してください。

「OUTPUT FILE」はコンパイルしたファイルの出力先を表しています。クリックで変更できますので自分の好みに応じて変更してください。

初期設定では/html/index.htmlとなっています。今回はhtmlフォルダを挟む必要はないのでPreprosフォルダ直下にコンパイルされるよう変更しています。

 

コンパイル先が設定できたら「Process File」をクリックします。

この時、「Process Automatically」にはチェックを入れておきましょう。以降index.pugファイルを保存すれば自動でコンパイルしてくれます。

クリックすると先程「OUTPUT FILE」で指定した箇所にindex.htmlが自動で作成されています。もし表示されなければリロードしましょう。

これでindex.pugのコンパイルが完了しました。同じ手順でSCSSファイルもコンパイルしてみてください。

その時の設定を解説しておきます。

 

『OUTPUT FILE』

先述の通り、コンパイル先を指定することができます。

 

『FILE OPTIONS』

・Process Automatically – 以降ファイル保存時に自動でコンパイルされます。

・Create a Source Map – css.mapファイルが作成されます。mapファイルがあれば、検証ツールで見た時に元のSCSSファイルの何行目の設定なのかが分かります。

 

『AUTOPREFIXR』

CSSにコンパイル際、自動でベンダープレフィックスが追加されます。

 

『MINIFY-CSS』

css.minファイルが作成されます。

 

『UPLOAD/EXPORT』

今回説明しませんが、ファイルをサーバーアップロード時に含めるかどうかを選ぶことができます。

無事コンパイルが完了するとCSSフォルダ内にstyle.cssファイルが作成されます。

ここまでの設定が完了すれば、あとはPugとSCSSを自由に記述してWebサイトを作成するだけです。

みなさん思い思いのWebサイトを作成しましょう。

 

3. PugとSCSSを使ってみよう

ここからは実際に「Pug」と「SCSS」を使ってコーディングしてみたいと思います。

3-1. Pugを使ってみよう

Pugの説明を一から始めるとまた記事が一つ書けてしまうため、今回はある程度割愛しながら最低限の便利機能のみを紹介します。

まずはindex.pugを4つに分割します。と言うのはあくまでもイメージの話で、4つのPugファイルを一つのindex.pugに集約するという意味です。

 

今回はpugフォルダ内に「_head.pug」「_header.pug」「_footer.pug」「_contents.pug」の4つのファイルを作成しました。

この時、ファイルの頭に_(アンダースコア)をつけると新たなHTMLファイルとしてコンパイルされることはありません。

作成した3つのファイルにそれぞれのコードを記述していきます。Pugの書き方については割愛しますが、「_head.pug」の例です。

Pugは閉じタグを書く必要がないので便利ですね。

作成した3つのファイルにコードが書けたら、そのファイルたちを一つのindex.pugに集約させます。

index.pugに『include ファイル名』これだけでファイルをincludeすることができます。

include _head.pug

集約したindex.pugファイルをコンパイルすることで、バラバラだったパーツたちが一つのHTMLファイルとして出力されます。

今回はファイルのインクルード機能のみ紹介しましたが、Pugにはもっと便利な機能が沢山あります。

そちらはまた別の記事でご紹介させていただきます。

 

3-2. SCSSを使ってみよう

SCSSにも便利な機能が沢山あります。今回はその中でもよく使う「変数」と「スタイルシートの分割」を使ってコードを書いてみようと思います。

 

・スタイルシートの分割

まずはスタイルシートを用途に応じて複数用意しましょう。これは後から追加することも可能です。今回はコンパイルする「style.scss」の他に、「_reset.scss」「_base.scss」「_variable.scss」を用意しました。

「_reset.scss」は名の通りリセットCSSを、「_base.scss」にはサイト全体のベースとなるコードを、「_variable.scss」には変数などを登録していきます。

SCSSファイル内でCSSの書き方をしても正常に動作するので、普段使用しているリセットCSSをそのままSCSSファイル内に入れてしまっても構いません。

その他にもヘッダーの記述をまとめた「_header.scss」などを作成しても良いですね。

それでは、各ファイルを一つに集約してみましょう。

元となるstyle.scssファイルに『@import “ファイル名”;』と記述すれば、一つのSCSSファイルにインポートされ、それがコンパイルされることで一つのスタイルシートとして出力されます。

この時、頭に付けた_(アンダースコア)は書かなくてもインポートされます。

@import "reset.scss";
@import "variable.scss";
@import "base.scss";

 

・変数

SCSSを使用するのであればぜひ変数を使ってください。

よく使う色や数値を変数で用意しておけば、例えばテーマカラーの変更があった際にも一行修正するだけでサイト全体に変更を加えることができます。

その変数を「_variable.scss」ファイルにまとめましょう。

 

書き方は『$呼び出したい名前: 値』で格納することができます。

$color-text: #4d4d4d;
$color-theme: #b72e2a;
$color-back: #cccccc;

使用するときは『プロパティ: $呼び出したい名前』で使用することができます。

繰り返し使用するテーマ色などを変数に入れておけば都度色コードを入れる必要もなく、修正が発生した際にも簡単に対応できますね。

background-color: $color-back;

 

SCSSにもPugと同様にもっと便利な機能が沢山あります。

みなさんも積極的にPugやSCSSを使用し、より理解を深めていきましょう。

 

3-3. プレビュー機能を活用しよう

Preprosには便利なプレビュー機能があります。

Preprosを開き、右上から3つ目のアイコンをクリックすると「Server」画面が開きます。

「Open Preview」「Open Secure Preview」どちらでも良いのでクリックすると、ローカル環境が立ち上がり、プレビューを見ることができます。

このプレビュー画面はLive Reloadという機能が備わっており、Preprosで監視しているファイルに変更があった際には自動でページを更新してくれるので、都度ページを更新する必要はありません。

 

おわりに

今回は実際にPreprosを使ってWebサイトを作る手順を説明しました。

Preprosを使う上で便利なPugやSCSSについても説明しましたが、今回の記事で紹介しきれなかったことはまだまだ沢山あります。

初歩的なことを一から説明したので、ある程度Web制作に携わっているデザイナーからすれば少し物足りないかもしれませんが、駆け出しのWebデザイナーの方はぜひこの記事をWebサイト制作に役立ててください。

【SEO対策】titleタグとmeta descriptionを最適化しよう！

HTMLの勉強を始めた時、SEO対策の基本としてhead要素のtitleにはページタイトル、meta descriptionにはページ内容の要約を記述しましょう、と学びますよね。
 
しかし、ただ言われた通りの内容を記述しておけばSEO対策はOK、というわけではありません。それぞれの要素がどの画面にどう表示されるのかを知ることで、注意すべきポイントというものが見えてきます。
 
今回はSEO対策の基本中の基本でもある、head要素のtitleタグとmeta descriptionの書き方についてご紹介します。

目次

1. head要素の重要性
2. titleタグについて
3. descriptionタグについて
4. おわりに

1. head要素の重要性

「head要素は本の表紙、body要素は本の中身」
 
HTMLを本に例えた時に使われる言葉です。head要素は本の表紙と聞いて、すぐに合点がいった人はSEO対策の基本を理解できている方だと思います。
 
HTMLの基本構造は大別すると、下記のように「DOCTYPE宣言」「head要素」「body要素」の３つの要素で構成されています。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>ページタイトル</title>
 <meta name="description" content="ページ内容の要約">
</head>
<body>
　ページの中身
</body>
</html>

サイトを閲覧する際、ブラウザ上で見ているのはbody要素の中身ですが、サイトに訪れる前の検索結果で見ているのはhead要素の中身です。Google検索結果に表示されるhead要素（titleやdescription）を見て、どのサイトを訪問しようか考えている時、それは平積みされた本の表紙だけを見て悩んでいる状態と似ています。
 
どんなに凝ったデザインのサイトを制作しても、サイト訪問がhead要素で判断されているということを考えると、titleタグやmeta descriptionもデザインと同じように重要な要素であるということが理解できます。

2. titleタグについて

titleタグはHTML文書のタイトルを指定する要素で、ページのタイトルを記述します。head要素を「本の表紙」とした場合、titleタグは「本のタイトル」に相当します。実際にtitleタグで指定したタイトルは、検索結果やブラウザのタブ、ブックマークのタイトルとして使われます。

<title>株式会社DOL</title>

これらの使用される場面を踏まえた上で、titleタグを指定する際に注意すべきポイントは次の3つです。
 
(1) シンプルにする
タイトルは検索結果やブックマークのタイトルなど、ページに訪問するユーザーが、最初に目にする内容です。ページ内容を端的に表現したわかりやすいテキストにしましょう。
 
(2) 31文字以内に収める
検索結果に表示される文字数は31文字が上限となっており、それ以降は省略されてしまいます。ユーザーに訴求内容を伝えるには、31文字以内で記述しましょう。
 
(3) サイト内でユニークにする
タイトルが重複しないように、ページ毎にユニークなタイトルを指定しましょう。タイトルが重複していると、ユーザーはページの内容をきちんと判別することができません。

3. descriptionタグについて

meta descriptionはページ内容の要約を記述します。本に例えた場合、titleタグが「本のタイトル」なら、descriptionは「本の裏表紙」に相当します。descriptionで指定した内容は、検索結果ページでタイトル下にサイト説明文として記述されます。

<meta name="description" content="ページ説明を記述する">

descriptionを指定する際に注意すべきポイントは次の3つです。
 
(1) キーワードを含める
descriptionに検索キーワードと同じキーワードが含まれていた場合、検索結果で該当キーワードが太字で表示されます。これによりユーザーが求めている情報がページ内にあることを明示することができます。
 
(2) 100文字以内に収める
検索結果の画面に表示される文字数は、Googleの仕様変更によって、ここ3〜4年の間にも100〜250文字までと大きく変動しています。どんな時にもユーザーに訴求したい内容を明示できるよう100文字以内に収めるようにしましょう。
 
(3) ページごとにユニークにする
descriptionは各ページの要約を記述するため、基本的にはユニークになるはずです。もし、各ページの要約を作成するのは工数がかかるから、全ページ同じ内容で記述しよう、とするのであれば検索エンジンによる自動補完に任せる選択もあります。（ただし、ユーザーにとっては適切な説明であるとは限りません）

4. おわりに

今回はSEO対策の基本であるtitleタグとmeta descriptionの最適化についてご紹介しました。
 
検索結果でなかなかクリックしてもらえないという悩みを抱えている場合は、body要素の中身をあれこれ改修するのではなく、head要素の記述を見直してみましょう。titleタグやmeta descriptionの書き方を修正するだけで検索結果の表示が変わり、クリック率が向上するケースもあります。
 
body要素のサイトデザインをしっかりと作り込んだのなら、head要素は本の表紙と思って、ユーザーに手に取ってもらいやすい記述を心がけましょう。
 
 

参考文献：
『現場のプロから学ぶ　SEO技術バイブル』西山悠太朗・小林 睦 (著)

【WordPress】会員サイトを構築するには？人気のプラグイン6選

WordPressではプラグインによって様々な拡張機能を実装することができますが、会員サイト構築においても例外ではなく、プラグインを利用することで目的にあった機能を比較的簡単に構築することができます。

ただプラグインが豊富な分、「どのプラグインを利用すべきか？機能の違いはあるのか？」という点が一番悩ましいところではないでしょうか。

WordPressで会員サイトを構築しようとお考えの方へ役立つプラグインをご紹介します。

目次

 

1. WP-Members Membership Plugin
2. Simple Membership
3. Ultimate Member
4. WP Private Content Plus
5. ProfileGrid
6. Memberful WP
おわりに

1. WP-Members Membership Plugin


プラグイン詳細はこちら

操作が簡単で利用者数も多いため、「迷ったらこれ！」な定番プラグインです。

・日本語対応。
・操作が簡単。
・利用者が多いため、インターネット上で使い方を検索できる。
・専用のショートコードを記載するだけで会員登録やログインページを作成できる。
・会員種類を分けることはできない。

2. Simple Membership


プラグイン詳細はこちら

デフォルト項目で不足なく、素早く作成したい人におすすめなプラグインです。

・日本語対応。
・会員種類を分けることができる。
・登録フォームに関わる項目や文章の変更ができない
・決済システムPayPalとの連携可能
・決済の設定やカスタマイズにはプログラミング技術がいる

3. Ultimate Member


プラグイン詳細はこちら

「WP-Members Membership Plugin」と比べると少し高機能なプラグインです。

・直感的な操作でフォームをカスタマイズすることができる。
・会員の権限追加やグループ分けなどの詳細設定ができる
・会員のクラスによって権限を分けることが可能

4. WP Private Content Plus


プラグイン詳細はこちら

ネットショップがメインのサイトにおすすめなプラグインです。

・デフォルトで全てが会員限定となる
・全体に公開したいものは個別に設定可能
・有料プランでWooCommerce（ウーコマース）と連携可能（ネットショップ向き）

5. ProfileGrid


プラグイン詳細はこちら

コミュニティ機能がメインのサイトにおすすめなプラグインです。

・登録会員の一覧を作成できる
・会員のグループ分けができる
・会員による投稿が可能
・SNSに近い機能として活用できる

6. Memberful WP


プラグイン詳細はこちら

有料版で一通りの機能を使用したいサイトにおすすめなプラグインです。

・決済、定額支払機能などまとめて利用可能
・無料版はカテゴリに制限がある

おわりに

本日はWordPressで会員サイトを構築しようとお考えの方に向けて人気のプラグインをご紹介しました。使い勝手を知るためにも実際に様々なプラグインを試してみても良いかもしれません。

「備えたい機能はどのようなものなのか、それに合ったプラグインはどれか？」を考える際に、ぜひ参考にしてみてください。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

画像スライダープラグイン「slick」の使い方

Webサイト制作においてスライド表示は欠かせないと言っても過言ではありません。
例えばメインビジュアルやバナーリンクをスライド表示にすることは良くありますよね。
そんなときに便利なのが「slick」というプラグインです。
導入方法や使い方もとても簡単なので、今回はスライダープラグイン「slick」をご紹介します。

目次

1. slickとは
2. slickの使い方 ~導入~
3. スライダーの作成
3-1. 完成サンプル
3-2. htmlを記述する
3-3. cssを記述する
3-4. JQueryを記述する
4. カスタマイズ方法①
4-1. 完成サンプル
4-2. cssを記述する
4-3. JQueryを記述する
5. カスタマイズ方法②
5-1. 完成サンプル
5-2. htmlを記述する
5-3. cssを記述する
5-4. JQueryを記述する
おわりに

1. slickとは

冒頭でも説明した通り、スライダーを作成するプラグインです。

公式HPはこちら

2. slickの使い方 ~導入~

2-1. slickをダウンロードする

公式HPより「get it now」をクリックし、zipファイルをダウンロードします。
ダウンロードしたファイルの内、使用するのは下記の2つです。

・slick > 「slick.css」
・slick > 「slick.min.js」

上記２つをcssフォルダ、jsフォルダに格納します。

 

2-2. htmlに記述する

htmlの<head>内に下記記述します。
slickはJQueryで動いているので、JQueryのCDNも忘れずに追記しましょう。

<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

3. スライダーの作成

3-1. 完成サンプル

5枚の画像を使ってスライダーを作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

 

3-2. htmlを記述する

<ul class="slick">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>

3-2. cssを記述する

デザインによってcssは変更して下さい。

.slick {
 width: 40%;
 margin: auto;
}
.slick li img {
 width: 100%;
}

3-2. JQueryを記述する

$(function() {
 $('.slick').slick({
  autoplay : true,autoplaySpeed : 1000,
  dots: false,
　arrows:false
 });
});

4. カスタマイズ方法①

4-1. 完成サンプル

左右にある画像を少し見えるように作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

4-2. cssを記述する

.slick {
 width: 100%;
 margin: auto;
}
.slick img{
 margin: auto;
}

4-3. JQueryを記述する

$(function() {
 $('.slick').slick({
  autoplay : true,
  autoplaySpeed : 1000,
  dots: false,
  arrows:false,
  centerMode: true,
  centerPadding: '25%'
 });
});

5. カスタマイズ方法②

5-1. 完成サンプル

サムネイル付きのスライドショーを作成しています。

 

  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5
  • 画像1
  • 画像2
  • 画像3
  • 画像4
  • 画像5

5-2. htmlを記述する

<ul class="slick">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>
<ul class="thumbnail">
 <li><img alt="画像1" src="img/img1.jpg" /></li>
 <li><img alt="画像2" src="img/img2.jpg" /></li>
 <li><img alt="画像3" src="img/img3.jpg" /></li>
 <li><img alt="画像4" src="img/img4.jpg" /></li>
 <li><img alt="画像5" src="img/img5.jpg" /></li>
</ul>

5-3. cssを記述する

.slick {
  width:100%;
  margin: 0 auto 20px;
}
.slick li img{
  width:100%;
}
.thumbnail {
  width:100%;
  margin:auto;
}
.thumbnail li img{
  margin:auto;
}

5-4. JQueryを記述する

$(function() {
 $('.slick').slick({
  asNavFor:'.thumbnail',
  slidesToShow:1,
  arrows: false,
  autoplay : true,
  autoplaySpeed : 1000
 });
});
 $('.thumbnail').slick({
  asNavFor:'.slick',
  focusOnSelect: true,
  arrows: false,
  centerMode: true,
  centerPadding: '25%'
 });
});

おわりに

今回は画像のスライドショー作成に便利な「slick」を紹介しました。
複数の画像を使用したいときに画像を動かせるようになると少しリッチなサイトが作成できます。
手軽に導入できるので、ぜひWebサイト制作にお役立ちいただければ幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。




使ってますか？画像圧縮ツール「TinyPNG」

 

Webサイトを制作する上でほぼ必ず使用する写真や画像ですが、みなさんはサーバーアップの際に圧縮処理をしていますか？

一枚だけを圧縮したところでサーバーへの負担、読み込み速度に変化はありませんが、多くの画像を使用するようになった昨今のWebサイトでは、画像を圧縮することでサーバーにかかる負荷の軽減、読み込み速度の改善が期待できます。

 

今回は画像圧縮の際に役に立つWebツール「TinyPNG」を紹介します。

 

目次

1. TinyPNGとは
2. TinyPNGの使い方
3. 圧縮画像の比較
4. TinyPNGを使用するリスク
おわりに

1. TinyPNGとは

冒頭で述べたように、「TinyPNG」とはブラウザ上で利用できる画像圧縮ツールです。

一度に20枚、ファイルの容量は5MBまでと上限がありますが、無料で利用できる便利なツールです。

画像によっては50%以上の圧縮が可能で、後ほど比較しますが、圧縮前の画像と見比べてもほとんど劣化が見られません。

これほどの圧縮率であれば読み込み速度の向上も十分期待できますね。

サイト：TinyPNG

 

2. TinyPNGの使い方

使い方は非常に簡単で、サイトにアクセスしたらフォルダから圧縮したいファイルをドロップするだけで自動で圧縮されます。

 

 

 

圧縮が完了するとダウンロードボタンが表示されるので、そちらをダウンロードして圧縮完了です。

フォルダ名は元々の名前が使用されるのでわざわざファイル名を直したりという手間もありません。

 

 

3. 圧縮画像の比較

では、先ほどの手順で圧縮した画像を比較してみましょう。

 

＜圧縮前＞

 

 

＜圧縮後＞

 

 

2枚の画像を見比べても目立った劣化はありません。

ほぼ同じ画像に見える2枚ですが、画像の詳細を見てみると圧縮前は831KB、圧縮後は295KBまで圧縮されています。

約65%も圧縮されていますね。

一枚では意味がなくてもチリも積もれば山となるので、決して馬鹿にはできません。

 

4. TinyPNGを使用するリスク

TinyPNGを使用する際にはリスクもあります。

オンライン上に画像をアップロードする以上、TinyPNGから画像が外部に流出する可能性があります。

悪意を持った人間が画像を盗み、悪用する恐れがありますので、流出して困る画像のアップロードは控えた方が良いかもしれません。

また、ダウンロードする際にスパイウェアを仕込まれる可能性も0ではありませんので、危険性を知った上で利用して下さい。

 

Webサイトに使用することを前提として書いているので、流出云々は問題ではないかもしれませんが、安全性を考慮するのであれば、ローカルで全てが解決するよう別の圧縮ソフトを使用しましょう。

 

おわりに

今回はブラウザ上で利用できる画像圧縮ツール「TinyPNG」を紹介しました。

読み込み速度はユーザビリティに直結するので、Webデザイナーの方は必ず画像を圧縮してからサーバーにアップするようにしましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。

コーディングで忘れずにチェックすべきポイント

PCサイトのコーディングを終えてからレスポンシブ対応を進める時、「そういえばここは◯◯にしなきゃいけないんだった…」とつい忘れがちだけど、重要なポイントってありますよね？あらかじめ注意すべきポイントを抑えておけば、手戻りが発生することなく効率良くコーディングすることができます。

今回はレスポンシブサイトのコーディングで、忘れてしまいがちだけど考慮すべきポイントについてご紹介します。

目次

 

1. 見出しの行間指定
2. レスポンシブの改行位置
3. flexのspace-betweenの最終行
4. 改行される要素の高さ指定
5. アスペクト比が異なる画像に対応
6. transitionで予期しないアニメ―ション
おわりに

1. 見出しの行間指定

レスポンシブ対応で忘れがちなポイントの1つが見出しの行間指定です。PCサイトでは１行に収まっていたテキストが、SPサイトでは改行されることが多々あります。その時にline-heightの指定が適切に指定されていないと、行間が狭すぎたり広くなり過ぎたりと、読みづらくなってしまいます。

見出しの行間はSPサイトでの改行を踏まえて設定しておきましょう。

2. レスポンシブの改行位置

PCサイトではキレイに文字組みされていたキャッチコピーや見出しが、SPサイトではブラウザ幅に応じて改行されてしまうのは、ちょっと見栄えがよろしくありません。

brタグにclass=”sp-br”などのクラスを付与して改行位置を調整するのもありですが、このやり方ではまだ崩れてしまう可能性があります。キレイに改行させたいテキストをspanタグで囲い、inline-blockを適用しましょう。

3. flexのspace-betweenの最終行

新着記事などの一覧表示に使われるカードレイアウトをコーディングする際、要素をきりの良い数字で作成するとdisplay: flexとjustify-content: space-betweenで作りがちです。しかし、1行3列のレイアウトに要素が４〜５つしかなかった時、、最終行の要素は左寄せではなく両端寄せになってしまいます。justify-content: flex-startと指定しましょう。

4. 改行される要素の高さ指定

見出しに限らずレスポンシブ対応で文字が改行されてしまう箇所は多いです。お問い合わせフォームでよく使われるラベルやボタンなどにheight指定をしていると、SPサイトでは枠からテキストがはみ出てしまうことが良くあります。高さはpaddingで調整するようにしましょう。

5. アスペクト比が異なる画像に対応

「お知らせ」などCMSでクライアントが管理する投稿コンテンツは、デザイン上想定していたアスペクト比とは異なる画像が使用される可能性があります。その際にoverflow: hiddenを設定していないとレイアウトが大きく崩れてしまいます。
投稿コンテンツの画像エリアにはoverflow:hiddenを忘れないようにしましょう。

6. transitionで予期しないアニメ―ション

hover時に滑らかなアニメーションを指定する際、深く考えずにtransition: allを設定していると、幅を縮めた時に予期しないアニメーションが発生することがあります。アニメーションさせるつもりのないプロパティがtransition: allの指定によって、すべてアニメーションになっているのが原因です。面倒臭がらずにtransition : opacity 0.3, transform 0.3 とアニメーションさせたいプロパティを指定しましょう。

おわりに

コーディング業務で指定が漏れてしまいがちなポイントについてまとめてみました。

デザインからコーディングをする際に、常に理想の状態（文字数や画像サイズ）を前提としたコーディングをしていると、このような落とし穴にはまってしまいがちです。Webデザイナーとしては実際の運用を常に見越して、あらかじめ注意すべきポイントを抑えたコーディングを心がけましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

写真の基本構図パターンを知ってサイト制作に活かそう！

 

サイト制作を行うWebデザイナーは、仕事で写真を撮ることはなくても写真データを扱う機会は多々ありますよね。

 

クライアントから提供された写真素材をそのままの縦横比で使用することは少なく、大抵はサイトに合わせて適宜トリミングすることが多いのではないでしょうか。

 

Webデザイナーとしてデザインを左右する写真を適切に扱うためにも、写真の構図を理解し効果的に使えるようになりましょう！

目次

写真の重要性
基本構図
1. 三分割構図
2. 二分割構図
3. 日の丸構図
4. 放射線構図
5. 対角線構図
6. トンネル構図
おわりに

写真の重要性

写真が与える印象は文字より大きいと言われています。そのため写真をパッと見て3秒以内に興味を持たれなければ内容まで見てもらえないこともしばしばです。

 

逆に写真がサイトやテキストの内容と一致しており、適切に扱えている場合には流し読みや飛ばし読みが容易になるため読まれやすいとも言われています。

 

「その写真で何を伝えたいのか」「見せたいポイントはどこなのか」を考えて使うこと、その上で「見せたいポイント」に注目させる構図とはどのようなものか、サンプルの写真を交えて紹介したいと思います。

 

基本的な構図

1. 三分割構図

写真を縦横に三分割して、その線や交差する点に被写体や要素を配置する構図です。

オーソドックスでバランスの良い配置となる定番構図で、感情や関係性、全体を表現しやすいとされています。

 

 

2. 二分割構図

写真を縦もしくは横の二分割にする構図です。

色や奥行きが分かれているときに使いやすく、境界線をはっきりと出せることでシンメトリーのような美しさを表現することができます。

 

 

3.日の丸構図

被写体を中央に配置する構図です。

被写体を目立たせ、ストレートに捉えられることが特徴です。そのシンプルさゆえに力強い印象にもなれば、つまらない印象にもなりやすいので使い方のバランスが大切です。

 

 

4.放射線構図

ある一点から放射線状にひろがっていくような構図です。

遠近感や奥行き感を強調することができます。放射線の消失点に被写体を配置すると視線誘導にも有効です。

 

 

5.対角線構図

対角線上の線に境界を配置したり、被写体を乗せる構図です。

２つの被写体を見せたい場合、横並びよりも対角線上に置いたほうがバランスが取れた写真になります。

 

 

6.トンネル構図

枠となる風景の中にメインの被写体を置く構図です。

被写体に視線が集中しやすくなるため、より印象的に見せることができます。

 

おわりに

写真や素材の使い方・見せ方については「なんとなく良い」の主観も大事にしつつ、「なぜその配置にしたのか（切り取ったのか）」説明できる知識や目線を養っていきましょう。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。Webサイトについてお悩みのある方はお気軽にお問い合わせください。

セレクトボックスの初期値の色を変える方法

 

inputタグであれば「選択してください」の文字色を変えたいときcssで簡単に色を変更できます。
しかし、セレクトボックスはcssで色の変更をすることができず、プレースホルダーを設定することもできません。そこで今回はセレクトボックスの初期値の色を変える方法をご紹介します。
とても簡単に変えることができるので、ぜひ試してみて下さい。

目次

1.セレクトボックスとは
2.完成サンプル
3. コード紹介
3-1. htmlファイルを用意する
3-2. CSSファイルを用意する
3-2. JavaScriptファイルを用意する

おわりに

1. セレクトボックスとは

ボックスをクリックすると選択項目が複数出てくるフォームタグの一種です。

2. 完成サンプル

「選択」の文字は実際に選択肢に入ってないので、グレー色にします。
サンプル１を選択した際は、赤色で表示されます。

 

3. コード紹介

3-1. htmlファイルを用意する

重要なポイントは、selectタグにonchange属性をつけることです。onchange属性はselect要素の属性が変わったときに起動します。

<select name="sample" onchange="Color(this)" required>
 <option value="" disabled selected>選択</option>
 <option value="2">サンプル１</option>
 <option value="3">サンプル２</option>
 <option value="4">サンプル３</option>
</select>

3-2. CSSファイルを用意する

ページをひらいたときの最初の色を指定します。

select{
 color: grey;
}

 

3-3. JavaScriptファイルを用意する

onchangeで属性が変わった際にvalueが0以外は文字色がredになるように指定します。

function Color(sample){
 if( sample.value == 0 ){
  sample.style.color = '';
 }else{
  sample.style.color = 'red';
 }
}

 

おわりに

今回はセレクトボックスの初期値の色を変える方法を紹介しました。
細かい所ですが、ユーザビリティに直結する大事な部分です。
html、cssだけでは修正できず少し面倒ではありますが、やり方さえ分かってしまえば簡単に変更することが可能なので、この記事を参考に少しでも業務の役に立てていただけたら幸いです。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。