Goalist Design Blog

レタスデザイナー、コーディングをする

こんにちは、今月は出没度高めのナガタです。

新卒採用サイト制作シリーズ、ディレクター・デザイン業を経ていよいよ最終章へと向かいたいと思います。

前回までをおさらいしますと、メンバーの写真撮影を行い、写真の切り抜きを終え、どうにかこうにかトップのビジュアルイメージ作りを行ったのでした。

 

そららを組み合わせたのが、ちらっと、こんな感じです。 f:id:e-nagata:20170925115210p:plain

 

全てのページの画像モックをつくる

トップページを作った後はSketchと格闘しつつ、そして当初のスケジュールからも結構な遅れをとりつつ、泣きながら各ページのモック画面をつくりました。地味にショートカットをググりまくっています。慣れぬ…illustratorと激しく混同しております。

実際の画面にテキストをはめてみた時の文字量調整もすごく大事ですね〜。 PC版とモバイル版、両方つくってスクロールの長さや読みやすさも確認します。

ちらっと、こんな感じです。

f:id:e-nagata:20170925115235p:plain

 

Hello! Bootstrap

コーディングを始めるにあたり、今回Bootstrapを利用することになりました。

「Bootstrapってまず何？」状態からのスタート。何やらTwitter社が開発したCSSのフレームワークで、そちらで用意されている枠組みや要素を使うと簡単にサイトが組めるらしい。レスポンシブデザインもお任せあれ、と。ほほ〜。

とりあえず、簡単に作ったhtmlファイルの＜head＞~＜/head＞部分にこのリンクを貼り付けます。(Bootstrapの詳しいスタート方法は他にたくさん親切なサイトさんがあるので割愛)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

そのあとJavaScriptやjQuery等のプラグインも貼り付けて、同じように読み込めばいいんですね。 CDN…何それなんかすごい…初めて知る概念…私本当にIT会社に来たんだなあ(しみじみ)と思いました。

初心者がBootstrapを扱ってみた所感ですが、 基本のグリッドの概念やパーツは用意されてるとはいえ、その仕様は1日直に組んでみて始めてくせがわかった、という感じでした。ネット記事を見た限りもっと簡単なものだと構えていたもので…。

あと、公式ページだと英語に目を通すだけで諦めてしまいそうなので、私は日本語に翻訳されているページにだいぶお世話になりました。説明はバージョン3のものになってしまいますが、基本概念を抑える程度であれば大丈夫かと思います。(※2017年9月現在Bootstrapはv4がリリースされてます)

 

Hello! Sass

htmlを書いたらもりもりcssを組んでいきます。 ここでSassなるものを導入。 cssを入れ子構造にしたり、ネストで書いたり、テーマカラーを指定して数値で変化させたり、かなり便利な書き方ができます。すごい。 例えばアクセントカラーをこの色に指定して、

$accentcolor: #F79E00;

指定箇所で"$accentcolor"の表記で使うとか。

.btn-entry {
  border: 1.5px solid $accentcolor;
  // background: $accentcolor;
  &:hover {
    border-color: $accentcolor;
    background: $accentcolor;
  }
}

あとから色を変えたくなったら最初の大元、一箇所だけ記述を変えれば良いんですね！すごい便利だ！

cssを読み込んで画面が組み上がっていく！テンションが上がる！うほほ f:id:e-nagata:20170925140732p:plain

 

モバイル版を整える

忘れていました。デスクトップの大きさで組むのとモバイルだと全然ちがうんですね。 例えばトップイメージのサイズとか。 PC版と、モバイル版で最適サイズを調整する必要があるのですね〜〜。先輩が書いてくれたコードを見て、見よう見まねで整えていきます。

.title-view {
  width: 100%;
  height: 500px;
  min-height: 60vh;
  background-size: cover;
  position: relative;

  @media screen and (max-width: 480px) {
    height: 600px;
    min-height: 80vh;
    background-size: cover;
  }
}

( @media screen and (max-width: 480px)〜以下が、モバイル版に対してcss上書きされている箇所です)

 

スケジュールが押して泣く

画面のモック作りでスケジュール遅れてしまっていたので、順算でいくと期日が間に合わず、先輩にコーディングをガンガン手伝ってもらいながら、どうにかこうにか仕上げました。というかコーディングは質問しまくり、ほぼ頼りっきりでした。不甲斐なくてすみませんッ…！ 今回時間なくてわからないままになあなあにやってた 部分もいずれはちゃんとわかるようになりたいです。 ブラウザのチェックもすませ、ごにょごにょ(たくさんありすぎて割愛)修正しながらちゃんと表示されてるか確認します。

 

怒涛の2ヶ月間

どうにかこうにか初めてだらけで一瞬で2ヶ月間でしたが、社内確認や環境確認も終え、9月頭にリリース！ああ〜〜〜 すっごい荒削りで作ったけれど、新卒採用に少しでも何か影響できたらいいなと思います。

実際のページはこちらになります。 fresh-recruiting.goalist.co.jp

新卒採用サイト作成記、クローズ！！