WEB制作プログラマーから見た効果的なリンクデザイン【コピペで使えるコード付】

2021年11月26日 16:22

こんにちは！テナアダム松山支店のキムラーです。
今回はWEB制作のプログラマーをしている私の目線で効果的だと感じたリンクデザインを紹介します。ご参考までにコードも載せておきますので、良ければお使いください！

①色の変化でわかりやすいリンク

こちらは、カーソルをリンクに重ねると赤く色が変わります！
ボタンの色が変わることで、ここがリンクであると一目で理解しやすくなりますね。こういった直感的にボタンを認識できるデザインはUI的にも優れているといえます。

ちなみにこちらのロゴの文字フォントは「Roboto」のLight 300です。
「Roboto」とは、有名なフォント「Helvetica」に似た簡素ながらも力強さのあるフォントなのですが、Light 300は力強さが控えめになり柔らかな印象を与えます。サイトの雰囲気を優しいものにしたいときに使うと良いのではないかと思います。

HTML

<!doctype html>
<html lang="ja">
 <head>
   <title>Title</title>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- CSS -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="style.css">
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <script type="text/javascript" src="hover.js"></script>
 </head>
 <body>
   <a href="#">About us
     <div class="arrow-wrap">
       <div class="arrow"></div>
     </div>
   </a>
 </body>
</html>

CSS（style.css）

body {
 font-family: 'Roboto', sans-serif;
}
a {
 color: black;
 text-decoration:none;
}
a:hover {
 color: #FF7F7F;
}
.arrow-wrap {
 display: inline-block;
 margin-left: .4rem;
}
.arrow {
 margin-top: -0.35rem;
 position: relative;
 height: 0.5px;
 width: 1px;
 padding-left: 37px;
 background-color: black;
}
.arrow::before {
 content: "";
 margin: auto;
 position: absolute;
 top: 0;
 bottom: 0;
 right: -2px;
 width: 8px;
 height: 8px;
 border-top: 0.5px solid black;
 border-right: 0.5px solid black;
 transform: rotate(45deg);
}
.change:before {
 border-top: 0.5px solid #FF7F7F;
 border-right: 0.5px solid #FF7F7F;
}

jQuery（hover.js）

$(function() {
 $("a").hover(function() {
   $(".arrow").css("background-color", "#ff7f7f");
   $(".arrow").addClass('change');
 }, function() {
   $(".arrow").css("background-color", "black");
   $(".arrow").removeClass('change');
 });
});

②立体的で遊び心あるリンク

こちらは立体感のあるポップなボタンとなっており、クリックするとボタンが押し込まれます。
このようなボタンを見ると、リアルなボタンと似ているのでついつい押したくなりますよね。

またクリックすることによって、実際のボタンのように押し込むことができるので、PC上でも押した感覚になれます。

HTML

<!doctype html>
<html lang="ja">
 <head>
   <title>Title</title>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <!-- CSS -->
   <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <div class="wrap">
     <a href="#" class="btn">Reserve</a>
   </div>
 </body>
</html>

CSS（style.css）

.btn {
 display: inline-block;
 max-width: 180px;
 text-align: left;
 background-color: #ec9e50;
 font-size: 16px;
 color: #FFF;
 text-decoration: none;
 font-weight: bold;
 padding: 10px 24px;
 border-radius: 4px;
 border-bottom: 4px solid #e47e19;
}
.btn:active {
 transform: translateY(4px);
 border-bottom: none;
}

リンクデザインは、WEBだからこそできることですよね！
単純に、正しくページ遷移するためだけのリンクを付けるのでなく、「どのようなデザインだったら押したくなるのか？」「どんな動きや変化があれば、ユーザーにとって分かりやすいのか？」と考えることは構築・設計時にとても大事なことです。

サイトを訪れるユーザーにとっていかにわかりやすく使いやすいかを満たした上で、サイト運営側の要望を満たす構築をすることがプログラマーに求められることではないでしょうか。

以上、キムラーによる効果的だと感じたリンクデザインでした！
テナアダムでは、依頼されたことをこなすのではなくユーザービリティも考慮したデザインを心がけています。

もっと遊び心ある動きやデザインもご対応しておりますので、お気軽にお声かけくださいませ！

私は過去にプログラミングに関する記事を投稿しているので興味のある方は是非ご覧ください。

この記事が気に入ったらサポートをしてみませんか？