HTMLやCSS、jQueryを覚えようと思った時、まずはProgateやドットインストール、参考書などを使って勉強をする方が多いと思います。
それらのツールを使って勉強し試行錯誤を重ね、1からWebサイトを構築することができたとします。
「なにか物足りない…」
そう感じたことはないでしょうか。
デザイナーを目指す人は誰しもがぶつかる課題だと思います。
根本的にデザインが良くないとかバランスが悪いとかでない場合、世の中に公開されているWebサイトと何が違うのか見つけるのは難しいと思います。
私は長年デザイナーとして働いていますが、そこまでくればあとは小手先のアレンジだけでそこそこのクオリティに高めることができると思っています。
Webサイトを一通り構築できる方なら難なく実装できるテクニックだけをご紹介します。
修正前のデザイン
まずは簡単にWebサイトのデザインを作ってみました。
動きなどはなにも付けていない、シンプルなサイトです。
なにか物足りなく感じますよね。
物足りなく感じるのは動きやディテールのこだわりが足りないからです。
決してデザインが悪いわけではありません。
ここに以下で紹介していくアレンジを加えていくと、一気に今風のWebサイトに変わります。
1つずつ順を追って説明していきます。
Webフォントに変える
修正前のデザインでは、フォントはすべてデフォルトの「游ゴシック」でした。
説明文や見出し、英字をそれぞれデザイン性の高いフォントに変えるだけでWebサイト全体の印象はガラっと変わります。
日本語Webフォントは「Noto Sans JP」がおすすめ
手軽に実装できるWebフォントはGoogle Fontsが有名ですね。
Google Fontsで配信されているフォントには日本語フォントもいくつかあります。
ゴシック体の中でクセが強くなく美しいフォントは「Noto Sans JP」です。
様々なサイトで使用されていますね。
可読性を損ねることなく、洗練さを表現できるのでおすすめです。
実装もとても簡単です。
Google Fontsの実装方法
まずは公式サイトにアクセスします。
ページをスクロールしていくと、「Noto Sans JP」のセクションがあります。
「HTML」「CSS」のコードが用意されているので、コピーしてそれぞれ以下のようにペーストします。
HTML
<head>
...
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
</head>CSS
クラス名 {
font-family: "Noto Sans JP";
}CSSでWebフォントを適用したい箇所に指定すれば完了です。
とても簡単ですね。
テキスト選択時のハイライトカラーを変更
デモをみる
※文字を選択してみてください
テキスト選択時のハイライトカラーとは、以下のようにドラッグで文字を選択した時の色のことです。
すごく細かいですがこれが設定してあるだけで「このサイト凝ってるな」と思われやすいです。
ハイライトカラーだけを設定してもあまり効果はありませんが、この記事で紹介するアレンジ方法のいくつかを取り入れた上でこちらも実装すると効果が高まります。
実装方法
以下のCSSを追加するだけです。
::selection {
background: #d6e9ff;
}
::-moz-selection {
background: #d6e9ff;
}デモでは「カラー：#d6e9ff」を指定していますが、サイトに合わせて変更してください。
「color」プロパティを指定すれば文字色も変更できますよ。
アニメーションヘッダーを実装
ページを下にスクロールするとヘッダーが形を変えて追従してきます。
ただの固定ではなく、このようにアニメーションをつけることでオシャレな印象になります。
実装方法
jQuery
$(window).scroll(function(){
if ($(window).scrollTop() > 20) {
$('header').addClass('scroll');
} else {
$('header').removeClass('scroll');
}
});コピペで問題ありません。
簡単に説明すると、下方向に「20」進んだら<header>に「class=”scroll”」を付与しますよ。
という内容になっています。
これで、スクロールしたら<header>にクラスが付くようになりました。
次に、「class=”scroll”」が付いた場合の<header>に、変形後のCSSを追加していきます。
CSS
header {
padding: 40px 3%;
transition: .3s;
}
header.scroll {
background: rgba(0,0,0,.7);
padding: 15px 3%;
}記述はこれだけ。
スクロールしていない状態では「header {～}」部分が適用され、
スクロールすると「header.scroll{～}」部分が適用されます。
上記の例は、黒背景を付けて上下の余白を縮める記述になっています。
「transition」は設定しないとカクカクした動きになってしまうので、デモのように滑らかに変形させる場合は必須のプロパティです。
柔らかいシャドウをつける
「ドロップシャドウ=古い」
というイメージは忘れてください。
最近のデザインではまた主流になっています。
ポイントは、コテコテの濃いシャドウではなく、うっすらと広い範囲に広がるシャドウにすること。
デモでは以下の部分にかけてみました。
- 「島について」の文章
CSSの記述
クラス名 {
box-shadow: 0 10px 30px 0 rgba(4,53,128,.15);
}数字部分は以下の内容です。
- 1つ目：水平方向の距離（正の値を指定すると右、負の値を指定すると左に影が移動）
- 2つ目：垂直方向の距離（正の値を指定すると下、負の値を指定すると上に影が移動）
- 3つ目：ぼかし距離（正の値のみ指定でき、数値が高いほどぼやけた影になる）
- 4つ目：広がり距離（正の値を指定すると影の形状が大きく、負の値を指定すると小さくなる）
1から記述するのは大変なので、ジェネレーターを使うと簡単に作成できます。
ホバーアニメーションを実装
リンクにホバー（マウスオーバー）した時のアニメーションも重要です。
ふわっと浮き上がるアニメーションはついついクリックしたくなりますよね。
デモでは以下の部分に実装してみました。
- グローバルナビゲーション
- 「ホテル情報」各リンクのホバー時
- 「働くスタッフ」各リンクのホバー時
グローバルナビゲーション（テキストリンク）
HTML
<nav>
<ul>
<li><a href="">島について</a></li>
<li><a href="">ホテル情報</a></li>
<li><a href="">働くスタッフ</a></li>
<li><a href="">お問い合わせ</a></li>
</ul>
</nav>CSS
nav ul li a {
position: relative;
}
nav ul li a::before {
content: "";
width: 0;
height: 1px;
background: #fff;
display: block;
position: absolute;
top: calc(100% + 5px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: .3s;
}
nav ul li a:hover::before {
width: 100%;
}コピペで実装できます。
<a>タグの疑似要素で白いラインを作り、「width:0;」にして隠しておきます。
そしてホバーした時に、「width:100%;」にして左右に伸びるようにしてあります。
こちらも「transition」がないとアニメーションしないので必須のプロパティです。
リンク画像
デモでは、ホバーするとドロップシャドウ+画像が暗くなるようにしています。
どちらも数行のCSSのみで実装可能です。
HTML
<ul>
<li><a href="">
<figure><img src="img/sec02_01.jpg" alt=""></figure>
<div class="txtArea">
<h3>タイトルタイトル</h3>
<p>テキストテキストテキストテキストテキストテキストテキスト</p>
<p class="more"><span>MORE</span></p>
</div>
</a></li>
...
</ul>CSS
/* ドロップシャドウ */
ul li a {
transition: .3s;
}
ul li a:hover {
box-shadow: 0 10px 30px 0 rgba(0,0,0,.15);
}
/* 画像を暗くする */
ul li figure {
position: relative;
overflow: hidden;
}
ul li figure::after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
transition: .3s;
}
ul li a:hover figure::after {
background: rgba(19,39,47,.6);
}「ドロップシャドウ」に関してはそのままですね。
「transition」は必須です。
「画像を暗くする」については、
まず、<figure>の疑似要素で同じ高さと幅の箱を作って画像の上に被せています。
そしてホバーした時に背景色がつくようになっています。
スクロールアニメーションを実装
ページをスクロールすると要素がふわっとアニメーションしながら現れるエフェクトです。
よく見かけるやつですね。
見た目が良い以外にも、ページの読み込みスピードが上がるというメリットもあります。
積極的に実装していきたいアニメーションです。
実装方法
「Sal」というプラグインを使います。
GitHubからファイル一式をダウンロードします。
必要なファイルは以下の2つです。
- sal.css
- sal.js
CSSを読み込む
<head>
...
<link href="css/sal.css" rel="stylesheet">
</head>jsを読み込む
<script src="js/sal.js"></script>
<script>sal();</script>
<script src="js/script.js"></script>
</body>
</html>オプションは公式サイトをご覧ください。
ちなみにオプションを指定する場合の記述は以下。
<script src="js/sal.js"></script>
<script>
sal({
once: true
});
</script>
<script src="js/script.js"></script>
</body>
</html>「once:true」は一度だけアニメーションするというオプションです。
HTML
<div data-sal="slide-up" data-sal-duration="500"></div>あとはアニメーションさせたいタグにdata属性を指定します。
以下が用意されています。
- data-sal
…アニメーションの名前（fade、slide-up、zoom-in、flip-up) - data-sal-duration
…アニメーションの時間 - data-sal-delay
…アニメーションに遅延を追加 - data-sal-easing
…アニメーションのイージング
パララックス効果を実装
次は背景画像を固定して、簡易的なパララックス（視差効果）をつけてみます。
背景画像だけを固定する方法と、セクション丸々固定して、カーテンが持ち上がるようなアニメーションをご紹介します。
どちらもCSSのみで実装可能です。
背景画像を固定
背景の画像だけ固定されていますね。
これはものすごく簡単です。
CSS
クラス名 {
background-attachment: fixed;
}「background-image」で背景画像をしているクラスに、上記のCSSを追加するだけ。
セクションごと固定
次はセクション（メインビジュアル丸々）ごと固定する方法です。
こちらの方がおしゃれ感出ますね。
こちらも実装はとても簡単。
CSS
.main {
position: sticky;
top: 0;
}
.content {
position: sticky;
top: 0;
}「.main」=メインビジュアル
「.content」=メインビジュアルより下にあるコンテンツ
両方に上記CSSを追加するだけのお手軽パララックスです。
以下の記事でもっと詳しく説明しています。
うまく動作しない時はこちらを参考にしてください。
修正前と後の比較
比較するとどうでしょうか。
デザインはほとんど変えていないのに今風でおしゃれになったと思います。
まとめ
最近のWebサイトではアニメーションがあるのが当たり前になってきているので、アニメーションがないだけでも「なんか物足りない」となってしまいがちです。
アニメーションだけでなく、細部のディテールも凝ることで、デザインを大きく変えなくてもおしゃれに見せることができます。
みなさんも是非取り入れてみてください。