こんにちは！佐藤です。
モノトライブメンバーのブログ、一周目のトリです。緊張しますね。

主にコーディングを担当しています。
ものすごく簡単に言うと、デザインを動かしたりクリックできるようにしたりして、サイトとして使えるようにする工程です。

こんな感じでコーディングしています。

どうやって作ろう？

電車の広告や雑誌のレイアウトなどを見てもついつい「どうやって作ろう…」などと考えてしまいます。
テトリス病的なあれです。

ということで、その辺にあるものをコーディングしてみよう！といった企画を考えました。

（偉そうに言ってますが、今回の記事はモノサスさんのネタをパク…ではなくオマージュしています）
偉大なるモノサス様の元ネタはコチラ：https://www.monosus.co.jp/posts/2017/12/200014.html

さあ作ろう！

さて、まずはモチーフを探します。

このあたりでどうでしょうか？
都内某ビルの店舗一覧ですね。（一応ぼかしてますが、どこかわかりますか？）

今回はレイアウト的にもシンプルなものを選びました。
あとは作りながら考えます。
まずはやってみましょう。Let’s Try！です。

こうなりました。

See the Pen ブログ用コーディング01 by sato (@sato_mono) on CodePen.

タイトルやカード型のデザインをモジュール化して、エリアごとに色を変えて並べました。

共通のパーツをモジュール化すると使いまわしができて、後で色の変更や要素の追加・削除がやりやすいです。
みたいなことを考えながら設計しつつ作っています。

…なんというか物足りないですね。
モノトライブでは動きを付けたりトリッキーなサイトを作ることが多いので、もう少し遊びたくなります。

遊んでみました。

ということで、
（表示されるとき、注目しながら見てくださいね。いいですか）

どん！

See the Pen ブログ用コーディング02 by sato (@sato_mono) on CodePen.

最初に表示した時にシュッっと動いたり、ホバーした時に矢印がニョキっと出たりするように変えてみました。
確認するには、リロードしたりホバーしたりしてみてください。
（動きを擬音語で表すのはモノトライブ特有の文化です。深く考えずにお楽しみください）

最初にあまり決めずに作りながらあーだこーだやったので細かいツッコミは色々ありますが、好き勝手やれるのも楽しいです。

 

まとめ

もっと動きに凝ってみたり、他のものも作ってみたかったのですが次のネタがなくなってしまうので今回はこんな感じで。

コーダーに限らず仕事や趣味嗜好によって、人は見えているものが違うんじゃないでしょうか？
コーダーから見た世界はこーだ！ということでお楽しみいただけたらうれしいです。

次はなに作ろうかな？