More than 5 years have passed since last update.

今風なデザインに変えるためにできそうなこと

Posted at 2017-10-24

はじめに

最近以前よりも丸い印象を受けるデザインが増えてきました。

「Twitterが丸アイコンを採用して画像が見切れてしまった」
この話題があがったのが今から約4ヶ月前のことです。その後、Facebookも約1ヶ月前に丸アイコンを採用しました。

さらにiOS11の登場などが重なり、ある程度一定の法則性を持った今風のデザインが出揃ってきた印象を受けています。

多くのユーザーがいて、日々使っているinstagram, Facebook, Twitterなどのサービスや普段よく見ているiPhoneの画面にデザインを寄せていくのは使いやすさ、分かりやすさの面でプラスになることも多いと考えています。

この記事では最近のデザインの流れを踏まえて、サンプルサイトを今風のデザインに変えてみたいと思います。

※ 私はデザイナーではないのであくまで一ユーザーとしての視点からの考えになります

今風のデザインに変えるポイント

丸みを持たせる

ボタン, ユーザー画像, フォーム, アイコンなどに丸みを持たせます。

参考：Twitter

文字を少し太くする

Qiitaのトップページが今ちょうど切り替えられるので確認してみると文字が少しだけ太くなっているのがわかります。
さらに次に説明する「黒の主張を少し強くする」という部分にも当てはまっているのが確認できます。

参考：Qiita

黒の主張を少し強くする

iOS10から11へのアップデートから、さらには上の例からもわかるように黒の色が少し濃くよりフラットになっています。メニューなどよりはっきりわかりやすくしたいところに使われてる印象です。

サンプル

実際にサンプルを作ってみたので、それを使って違いを見てみます。今回は以下のソースコードを用います。
デザインが中心なのでhtml, cssの組み方が荒い部分があると思いますがご了承ください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルサイト</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://use.fontawesome.com/db7423e930.js"></script>
</head>
<body>
  <header>
    <div class="container clearfix">
      <div class="header_left">
        <ul class="clearfix">
          <li>
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            <span>ホーム</span>
          </li>
          <li>
            <i class="fa fa-bell" aria-hidden="true"></i>
            <span>通知</span>
          </li>
          <li>
            <i class="fa fa-envelope-o" aria-hidden="true"></i>
            <span>メッセージ</span>
          </li>
        </ul>
      </div>
      <div class="header_right clearfix">
        <img src="me.jpg" class="user_image">
        <input type="text" placeholder="検索">
      </div>
    </div>
  </header>
  <div class="main">
    <div class="background_image">
      <div class="overlay"></div>
      <img src="me.jpg" class="user_image">
      <span class="user_name">田中 太郎</span>
    </div>
    <div class="user_subheader">
      <div class="container clearfix">
        <a href="#">プロフィール編集</a>
      </div>
    </div>
  </div>
</body>
</html>

style.css

body {
  font-family: 'Noto Sans Japanese';
}

.clearfix:after {
  content: '';
  clear: both;
  display: block;
}

.container {
  width: 1000px;
  margin: 0 auto;
}

header {
  border-bottom: 1px solid #ccc;
}

.header_left {
  float: left;
}

.header_left ul li {
  text-align: center;
  color: #888; /*color: #444;*/
  float: left;
  padding: 10px 5px 11px 0;
  width: 65px;
}

.header_left ul li i {
  font-size: 20px;
  display: block;
  margin-bottom: 3px;
}

.header_left ul li span {
  font-size: 13px;
  font-weight: 200; /*font-weight: 600;*/
}

.header_right {
  float: right;
}

.header_right input {
  float: right;
  border-radius: 5px; /*border-radius: 15px;*/
  border: 1px solid #ccc; /*border: 1px solid #888;*/
  margin: 15.5px 0;
  padding: 7px;
  width: 200px;
}

.header_right .user_image {
  float: right;
  border-radius: 5px; /*border-radius: 15px;*/
  border: 1px solid #ccc;
  margin: 15.5px 0 15.5px 15px;
  height: 27px;
}

.main {
  background-color: #fafafa;
  height: 1000px;
}

.background_image {
  background: url(odaiba.JPG) no-repeat center /cover;
  width: 100%;
  height: 500px;
  position: relative;
}

.background_image .user_image {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 3px solid #ccc;
  border-radius: 5px; /*border-radius: 75px;*/
  left: calc(50% - 79px);
  top: 120px;
}

.background_image .user_name {
  color: #fff;
  font-size: 22px;
  font-weight: 100; /*font-weight: 400;*/
  position: absolute;
  text-align: center;
  width: 100px;
  top: 310px;
  left: calc(50% - 50px);
}

.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.4);
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.user_subheader {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  height: 70px;
}

.user_subheader a {
  color: #fff;
  background-color: #1abc9c;
  border-radius: 5px; /*border-radius: 18px;*/
  display: block;
  float: right;
  text-decoration: none;
  padding: 10px 20px;
  margin: 17px 0;
}

これらをWebブラウザで表示させてみると以下の画像のようにみえます。

これを上で説明した今風のデザインに変えるポイントを用いてソースコードをいじります。

やることは、

border-radiusを高さの半分にする
強調したい部分のfont-weightを太くする
color(黒)を濃くする

この3つになります。

実際に変える部分はソースコードにコメントアウトしておきました。

上の3つのポイントをソースコードに反映させると以下のようなデザインになります。

ほんの少しだけデザインを変えただけですが、だいぶ印象が変わったのがわかると思います。
丸みや濃さがでることによってフォーマルというより少しフランクな感じの印象を受けるようになりました。

まとめ

少しデザインを変えるだけでだいぶ（個人的には）しっくりくるようになりました。(SNSの見過ぎなだけかもしれませんが笑)
すべてのサービスに応用できるわけではないと思いますが、取り入れることができるサイトも多くありそうです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up