Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

はじめに

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

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

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

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

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

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

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

丸みを持たせる

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

スクリーンショット_2017-10-24_10_14_50.png

参考:Twitter

文字を少し太くする

Qiitaのトップページが今ちょうど切り替えられるので確認してみると文字が少しだけ太くなっているのがわかります。
さらに次に説明する「黒の主張を少し強くする」という部分にも当てはまっているのが確認できます。
スクリーンショット_2017-10-24_10_31_09.png
参考: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ブラウザで表示させてみると以下の画像のようにみえます。

スクリーンショット 2017-10-24 13.10.36.png

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

やることは、

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

この3つになります。

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

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

スクリーンショット 2017-10-24 13.18.14.png

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

まとめ

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away