DESIGN

【サンプル有】ホームページデザインの参考になるサイト7選!

ホームページのデザインの参考サイト

今回のテーマは「ホームページデザインの参考サイト」についてです。

ホームページデザインは、テンプレなどを使用すれば、短時間でデザインができます。しかし、ゼロからホームページデザインをする場合もあるかと思います。

そして、実際にホームページデザインをしてみると「なかなか上手く行かない…」こともあるでしょう。

本記事では、カンタンにホームページデザインを行う方法をご紹介します。また、実際に僕自作したホームページデザインもご紹介しています。

早速、本題に入っていきたいと思います。

ホームページデザインの参考サイトを選ぶ際の3つのポイント

本項目では、ホームページデザインの参考サイトを選ぶ際の3つのポイントをご紹介していきます。

選ぶ際の3ポイントについては、以下の通りになります。

  1. デザインとして機能しているホームページを参考にする
  2. 自分が作りたいホームページに似ているサイトを採用する
  3. 今のスキルは考慮しない

デザインとして機能しているホームページを参考にする

1つのポイントは、デザインとして機能しているホームページを参考にすることです。

デザイン性のない(機能していない)ホームページを参考にすると、絶対にいいホームページはできないです。

機能していないというのは、参考にしたサイトを訪れた際に混乱してしまうことを指します。例えば、「アイコンを押したのにトップページに行かない」などがあります。

こうした見た目はいいけど、機能していないサイトを参考にすると、かえって低品質の物を作ってしまいかねないので、できるかぎり機能しているサイトを選ぶことをオススメします。

デザイン性が優れているサイトは、下記で紹介しているようなホームページでも良いですし、「Web design gallery」の一択で良いです。

自分が作りたいホームページに似ているサイトを採用する

2つ目のポイントは、自分が作りたいホームページに似ているサイトを採用することです。

理想のホームページに似たサイトを参考にすることで、本当に作りたいサイトを作ることができます。

また、理想のホームページを参考にすることで、骨組みや「なぜ有名なサイトになっているのか?」や「もっといい方法はないのか?」などパッと見ただけではわからない細部まで研究することもできます。

こうすることで、サイト構築だけではなく、それ以外の部分でも成長することができます。

今のスキルは考慮しない

最後のポイントは、今のスキルは考慮しないことです。

今のスキルの力を無視して選ぶメリットは以下のとおりになります。

  1. 以前よりもスキルアップできる
  2. 作れる幅が広がる

今のスキルを考慮しないことで、作りたいサイトはもちろん、以前よりもよりスキルアップする子ができます。

そのため、今のスキルを考慮する必要はありませ。

ホームページデザインで参考になるサイト

本項目では、ホームページをデザインする際に、参考となるサイトをご紹介していきます。

おしゃれなデザインのサイト

まずは、お洒落なサイトを2つのご紹介していきます。

overflow

overflowのサイト

まずは「overflow」という会社のホームページです。

デザイン性(機能性)という部分ではこのサイトは非常になります。

例えば、赤色のボタンですね。この2つのボタンは、同じ意味を表しています。よくボタンの文字を見て見てると意味は「無料で始める」という意味です。

でも、例え文字を見なくても、僕たちは同じ機能があるはずと錯覚したはず。これがデザイン性の本質です。

このサイトのように同じ意味のボタンを同じ色にすることで「同じ属性なんだな」とユーザーに知らせることができます。

他にもいくつもいいところがあるので、ぜひ参考にして見てください。

参考URL:https://overflow.io/

探究学舎

探究学舎のホームページ

2つ目は「探求学舎」のホームページになります。

特に「これ!」といって特徴はないですが、本当に基本に忠実なサイトなので、初心者の方にはもってこいのサイトです。

このサイトが作れるようになると、脱初心者といってもいいくらい基本が詰まっています。

例えば、画像の上にボタンを配置する方法やヘッダーのデザインの仕方などがあります。

初めて今から本格的にサイトを作っていくという方にはかなり向いているサイトです。

参考URL:https://tanqgakusha.jp/

シンプルなデザインのサイト

最後に3つほど厳選したシンプルデザインのホームページをご紹介していきます。

bensen

bensenのホームページ

参考URL:https://bensen.com/

Colab 4010

Colab 4010のホームページ

参考URL:https://www.colab4010.com/

福助

福助のホームページ

参考URL:https://f-fukuske.jp/

CASH

CASHのホームページ

参考サイト:https://cash.jp/

ホームページデザインのサンプルコード

ここでは、上記で紹介したサイトに近いものを作りました。

実際にサンプルコードなどもご紹介していきます。(使ってもらってOKです!)

また、YouTubeでもプログラミングの動画を上げているので、ぜひ参考にして見てください!

HTML

<!DOCTYPE html>

<html lang=”ja”>

<head>

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Sample</title>

<!– header –>

<header>

<img src=””>

<nav>

<ul class=”header-info”>

<a href=”#”><li id=”headlist”>Home</li></a>

<a href=”#”><li id=”headlist”>About</li></a>

<a href=”#”><li id=”headlist”>Topic</li></a>

<a href=”#”><li id=”headlist”>Form</li></a>

</ul>

</nav>

</header>

<link rel=”stylesheet” href=”css/styles.css”>

</head>

<body>

<!– topic1 –>

<div class=”topic1″>

<p>8/1</p>

<hr>

<h2>Sample1</h2>

<a href=”#”>もっと読む</a>

<div class=”top1-img” id=”topImg1″>

<img src=”” alt=”” class=””>

<div class=”contents” id=”output”></div>

</div>

</div>

<!– topic2 –>

<div class=”topic2″>

<p>8/2</p>

<hr>

<h2>Sample2</h2>

<a href=”#”>もっと読む</a>

<div class=”top2-img” id=”topImg2″>

<img src=”” alt=”” class=””>

<div class=”contents” id=”output2″></div>

</div>

</div>

<!– topic3 –>

<div class=”topic3″>

<p>8/3</p>

<hr>

<h2>Sample3</h2>

<a href=”#”>もっと読む</a>

<div class=”top3-img” id=”topImg3″>

<img src=”” alt=”” class=””>

<div class=”contents” id=”output3″></div>

</div>

</div>

<!– topic4 –>

<div class=”topic4″>

<p>8/4</p>

<hr>

<h2>Sample4</h2>

<a href=”#”>もっと読む</a>

<div class=”top4-img” id=”topImg4″>

<img src=”” alt=”” class=””>

<div class=”contents” id=”output4″></div>

</div>

</div>

<!– button –>

<div class=”button”>

<p><a href=”#”>申し込みする</a></p>

</div>

<!– Map –>

<!– footer –>

<footer>

<ul class=”footer-info”>

<a href=”#”><li class=”footer-item”>Home</li></a>

<a href=”#”><li class=”footer-item”>About</li></a>

<a href=”#”><li class=”footer-item”>Topic</li></a>

<a href=”#”><li class=”footer-item”>Form</li></a>

</ul>

</footer>

<script src=”js/main.js”></script>

<script src=”http://code.jquery.com/jquery-3.4.1.min.js”></script>

<script>

$(function(){

function animation(){

$(‘.header-img’).each(function(){

var target = $(this).offset().top;

var scroll = $(window).scrollTop();

var windowHeight = $(window).height();

if (scroll > target – windowHeight){

$(this).css(‘opacity’,’1′);

$(this).css(‘transform’,’translateY(0)’);

}

});

}

animation();

$(window).scroll(function (){

animation();

});

})

</script>

</body>

</html>

CSS

/* common */

*{

font-family: ‘Trebuchet MS’, ‘Lucida Sans Unicode’, ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;

}

a{

cursor: pointer;

text-decoration: none;

color: black;

}

hr{

height: 5px;

background-color: white;

width: 6%;

margin-left: 50px;

margin-bottom: 40px;

}

/* header */

.header-img{

position: relative;

}

.header-info{

position: absolute;

top: 15%;

right: 10%;

}

.header-info > a{

display: inline-block;

padding-right: 90px;

font-size: 18px;

font-weight: bold;

list-style: none;

cursor: pointer;

text-decoration: none;

color: black;

}

/* topic1 */

.topic1{

position: relative;

padding: 4em3em;

margin: 1emauto;

color: #2c2c2f;

background: #5da9ff;/*背景色*/

width: 70%;

height: auto;

}

.topic1 p{

font-size: 24px;

padding-bottom: 20px;

}

.topic1 h2{

margin-bottom: 90px;

}

.topic1 a{

padding-top: 15px;

}

.top1-img img{

position: absolute;

top: 0;

right: 0;

width: 50%;

height: auto;

margin: 3.5em4em;

cursor: pointer;

opacity : 0;

transition : all700ms;

cursor: pointer;

transition-duration: 0.5s;

}

#output{

position: absolute;

top: 50%;

left: 65%;

width: 50%;

height: auto;

font-size: 36px;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

color: crimson;

}

/* topic2 */

.topic2{

position: relative;

padding: 4em3em;

margin: 2emauto;

color: #2c2c2f;

background: #5da9ff;/*背景色*/

width: 70%;

height: auto;

}

.topic2 p{

font-size: 24px;

padding-bottom: 20px;

}

.topic2 h2{

margin-bottom: 90px;

}

.topic2 a{

padding-top: 15px;

}

.top2-img img{

position: absolute;

top: 0;

right: 0;

width: 50%;

height: auto;

margin: 1.5em4em;

opacity : 0;

transition : all800ms;

}

#output2{

position: absolute;

top: 50%;

left: 65%;

width: 50%;

height: auto;

font-size: 36px;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

color: crimson;

}

/* topic3 */

.topic3{

position: relative;

padding: 4em3em;

margin: 2emauto;

color: #2c2c2f;

background: #5da9ff;/*背景色*/

width: 70%;

height: auto;

}

.topic3 p{

font-size: 24px;

padding-bottom: 20px;

}

.topic3 h2{

margin-bottom: 90px;

}

.topic3 a{

padding-top: 15px;

}

.top3-img img{

position: absolute;

top: 0;

right: 0;

width: 50%;

height: auto;

margin: 1.5em4em;

opacity : 0;

transition : all900ms;

}

#output3{

position: absolute;

top: 50%;

left: 65%;

width: 50%;

height: auto;

font-size: 36px;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

color: crimson;

}

/* topic4 */

.topic4{

position: relative;

padding: 4em3em;

margin: 2emauto;

color: #2c2c2f;

background: #5da9ff;/*背景色*/

width: 70%;

height: auto;

}

.topic4 p{

font-size: 24px;

padding-bottom: 20px;

}

.topic4 h2{

margin-bottom: 90px;

}

.topic4 a{

padding-top: 15px;

}

.top4-img img{

position: absolute;

top: 0;

right: 0;

width: 50%;

height: auto;

margin: 1.5em4em;

opacity : 0;

transition : all500ms;

}

#output4{

position: absolute;

top: 50%;

left: 65%;

width: 50%;

height: auto;

font-size: 36px;

font-family: -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif;

color: crimson;

}

.button{

background-color: #3765b0;

width: 80%;

height: auto;

border-radius: 20px;

margin: 0auto;

cursor: pointer;

}

.button p{

font-size: 48px;

text-align: center;

}

.button a{

color: white;

}

.button:hover{

opacity: 0.8;

}

/* footer */

footer{

padding: 1em01em0;

}

footer > ul{

text-align: center;

}

.footer-info{

margin: 0auto;

}

.footer-info > a{

display: inline-block;

padding-right: 80px;

font-size: 18px;

font-weight: bold;

list-style: none;

cursor: pointer;

text-decoration: none;

color: black;

}

Javascript

‘use strict’;

{

var enter = 0;

var leave = 0;

var headerImg = document.getElementById(‘headerImg1’);

var topImg1 = document.getElementById(‘topImg1’);

var topImg2 = document.getElementById(‘topImg2’);

var topImg3 = document.getElementById(‘topImg3’);

var topImg4 = document.getElementById(‘topImg4’);

var doc = document.getElementById(‘output’);

var doc2 = document.getElementById(‘output2’);

var doc3 = document.getElementById(‘output3’);

var doc4 = document.getElementById(‘output4’);

topImg1.addEventListener(‘mouseenter’, () => {

   topImg1.style.opacity = “0.6”;

doc.innerHTML=”imgae”;

}, false);

topImg1.addEventListener(‘mouseleave’, () => {

topImg1.style.opacity=”1.0″;

doc.innerHTML=””;

}, false);

topImg2.addEventListener(‘mouseenter’, () => {

   topImg2.style.opacity = “0.6”;

doc2.innerHTML=”imgae”;

}, false);

topImg2.addEventListener(‘mouseleave’, () => {

  topImg2.style.opacity = “1.0”;

doc2.innerHTML=””;

}, false);

topImg3.addEventListener(‘mouseenter’, () => {

  topImg3.style.opacity = “0.6”;

doc3.innerHTML=”imgae”;

}, false);

topImg3.addEventListener(‘mouseleave’, () => {

  topImg3.style.opacity = “1.0”;

doc3.innerHTML=””;

}, false);

topImg4.addEventListener(‘mouseenter’, () => {

  topImg4.style.opacity = “0.6”;

doc4.innerHTML=”imgae”;

}, false);

topImg4.addEventListener(‘mouseleave’, () => {

  topImg4.style.opacity = “1.0”;

doc4.innerHTML=””;

}, false);

}