トップページにおしゃれな背景画像を使うだけでそれっぽいサイトになる説を検証

はじめに

なぜやるか

就活用のポートフォリオを作っていて第一印象がなんだか安っぽいな〜と感じたので少し手を加えてみる

作っているもの

記事投稿アプリ（Qiitaに近い）

before

非ログインユーザーでも閲覧できるようにしたいので、頭にログインページは設けず。
その結果、初めてのユーザーにとってどうしたらいいの？というインターフェースになってしまっている。

after

とりあえず背景画像とゲストログインボタンを設置してみた。
うん、非常に改善されたと思う。

手順

ここからは画像の加工やCSSに慣れていない初心者向けに書きます。

おしゃれ画像はUnsplash一択

画像に困ったらとにもかくにもUnsplash。
世界中の美しい写真がログイン不要かつ無料でダウンロードできる。

Unsplash

加工はKeynote

MacユーザーであればKeynoteで事足ります。

新規スライド
　　↓
スライドサイズ設定
　　↓
画像を挿入
　　↓
画像サイズ調整

<--- ここまでで写真のトリミングが完了 --->

縦200px,横600pxでトリミング

画像に透かしを入れる

• 黒い透かし

写真の上に四角形を重ねる
　　↓
四角形の色を黒にする
　　↓
不透明度を調節する

• 白い透かし

色を白にしたらこんな感じ

加工が終わったら

ファイル
　↓
書き出す
　↓
イメージ

から好きなファイル形式を選んで出力

トップページに配置

viewファイル

index.html.erb

<div class='guest-login-box'>
  <%= link_to 'ゲストログイン', users_guest_sign_in_path, method: :post, class:'guest-login-btn' %>
</div>

CSS

index.css

.guest-login-box {
  height: 30vw;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("/images/guest_login_box_background.png");
  background-position: center;
  background-size: cover;
}

.guest-login-btn {
  border: 2px solid #fff;
  padding: 8px 20px;
  color: #fff;
}

画像はとりあえずpublic/imagesに配置しました。

以上で、トップ画像の完成です。

おわりに

ログインさせるためだけのトップページはユーザーファーストじゃない気がしていて（構造的にログイン不可欠なアプリは別ですが）

だからと言って、そのまんま出しすると？？？なUIになるし、第一印象がノペーっとしてパンチ弱くなるなと思いました。

誰かの参考になればうれしい

✔︎