Design

【サンプル有】理想のホームページデザインを作るための方法をご紹介!

ホームページ_デザイン
Pocket

こんにちは、うらけんです。

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

今ではテンプレなどを駆使すれば、それなりのデザインができますが、ゼロからホームページデザインをする場合もあるかと思います。

しかし、実際に、ホームページデザインをしてみると「なかなか上手く行かない…」ということはよくあるかと思います。

今回は、カンタンにホームページデザインを行う方法をご紹介します。また、実際に僕自身が作ったホームページデザインもご紹介しています。

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

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

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

3つのポイントについては、以下の通りです。

  1. デザイン性のあるホームページを参考にする
  2. 作りたいホームページに似たモノを参考にする
  3. 自分のスキルは無視して選ぶ

デザイン性のあるホームページを参考にする

1つのポイントは、デザイン性のあるホームページを参考にすることです。

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

しかし、ゼロからホームページを作れるかというとなかなか難しいものがあります。

そのため、できるだけデザイン性が優れているホームページを参考にすることが良いかと思います。

イケてるデザインは、下記で紹介しているホームページでも良いですし、違うメディアであれば「Web design gallery」の一択で良いです。

作りたいホームページに似たモノを参考にする

2つのポイントは、作りたいホームページに似たモノを参考にすることです。

理想のホームページに似たサイトを参考にすることで、本当に作りたいサイトをゼロから作る方法が徐々に見えてきます。

作りたいホームページに似たモノを参考にするということを図にすると以下の通り。

このように、作りたいページがあって、でもまだ作りかたがわからない。

だから、作りたいページを参考にしながら、作りたいページを制作できるようにスキルを磨いていく。

これがマネをする本質です。

自分のスキルは無視して選ぶ

最後は、自分のスキルを無視して選ぶことです。

自分のスキルを無視して選ぶメリットは以下のとおり

  1. スキルアップできる
  2. 作りたいものを作れるようになる

自分のスキルを無視することで、本来の目的を達成することができるので、現在のスキルは全て無視して問題ないです。

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

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

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

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

おしゃれなデザイン①

1つ目はトヨタのホームページです。

サイトで一番大事なのは一番上ですが、このホームページは抜群に良いです。

おそらく、ホームページをパッと見て、レースが終わった人たちの顔があって、左上にあるロゴを見て、「トヨタ」であることを認識します。

しかも、「victory」という文字があり、人間はこうしたプラスのエネルギーを加えられると、行動しやすくなります。

「どんな内容だ?」時になった方は、もちろんもっと詳しく見ていくため、下にスクロールします。

このトヨタのホームページから言えることは、「ファーストビューが命である」ということですね。

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

overflow

2つ目は「overflow」という会社のホームページです。

overflowのホームページの特徴として、ファーストビューで写真があまりないことです。

しかし、このファーストビューをみれび、だいたいoverflowの会社イメージがつくはずです。

「どんな印象を受けますか?」と質問されたら、なんて答えますか?

おそらく、「柔らかい」とか「優しい」とか「安心感がある」といった印象を受けたはず。

もしこのホームページの文字の字体が変化したら、印象がガラッと変わります。

このように、overflowのホームページでは、文字の型や位置、ロゴで会社の印象を与えているため、写真をわざわざ入れる必要はないということです。

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

探究学舎

3つ目は、「探究学舎」という会社のホームページです。

この3つの中なら、断トツでこのホームページがおすすめです。

デザイン性はいうまでもなくですが、文字の型やヘッダーの使い方なめちゃめちゃ参考になります。

今のトレンドとして、未来的なホームページやロゴの要望が多いです。

そのため、このサイトを利用しながら、未来的なデザインについて勉強できるので、一石二鳥ですね。

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

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

2つ目にシンプルなデザインのホームページをご紹介していきます。

bensen

シンプルさを出す際に、最も参考になるといってもいいサイトです。

ファーストビューは、少しシンプルさは欠けますが、その下は白を基調としているため、かなりシンプルさがあります。

シンプルさを出す際には、背景色を白ベースにして、フォントや文字の色を工夫することで、エレガントなホームページができます。

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

Colab 4010

このサイトもかなりシンプルさがあります。

もし、このサイトをいじるとすれば、写真のサイズを統一するくらいしか思いつきませんでした。

白ベースにで写真と文字とフォントで印象を伝える。

頭に入って来やすいデザインなので、かなり参考になることが多いはずです。

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

福助

最後は、このサイトです。

「ホームページを作りたい」って思った最初の頃に想像してしまうサイトデザイン。

白を基調としながら、写真をうまく使い、魅力的なホームページになっています。

もし、「直すとすればどこ?」と言われても、直しようがないくらい優れています。

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

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

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

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

サンプル:ホームページデザインの動画ダウンロード

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);
}
ABOUT ME
ウラケン
ウラケン
サラリーマンとWebデザイナーの二足のわらじを履いてます。「独学でWebデザイナーになれた方法」・「Webデザイナーの方に便利な情報」に発信しています。
Webデザインの詳細ページ
Pocket

Webデザイン_フロー Webデザイン