NEWS ブログ

コーダーから見た世界

ブログ担当:佐藤 雄一(テクニカルディレクター/コーダー)

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

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

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

 

どうやって作ろう?

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

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

(偉そうに言ってますが、今回の記事はモノサスさんのネタをパク…ではなくオマージュしています)
 偉大なるモノサス様の元ネタはコチラ: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.


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

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

 

まとめ

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

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

次はなに作ろうかな?

この記事を書いたのは

TECHNICAL DIRECTOR, CODER

佐藤 雄一(さとう ゆういち)

コーダーはこうだ!
コーディングとディレクションを少々。
デザインの雰囲気を大切にしつつ、
「適当にうまいことやって!」に答えます。

佐藤 雄一の他のブログはこちら

佐藤 雄一の実績はこちら

モノトライブメンバーが綴る、趣味や仕事や挑戦など様々な情報を発信するブログです。

CONTACT

閉じる

お問い合わせ

Let's
03-3555-7760 受付時間は平日10:00~19:00まで

お電話

御社名

{{companyerr}}

ご担当者名

{{nameerr}}

メールアドレス

{{mailerr}}

お電話番号

※差し支えなければご記入ください。担当者から折り返しお電話いたします。

お問い合わせ内容

{{bodyerr}}

モノトライブをどこで知りましたか?

PAGE TOP