しろばこ舎(Office Shirobako)のウェブサイトができました

手をつけはじめてから、およそ2ヶ月ほどでしょうか。ゆるゆると進めていた、しろばこ舎のWeb制作が、ひとだんらくしました。

しろばこ舎(Office Shirobako)
http://shirobako.work

入れ込みたかったこと

・箱っぽさ
そもそも「しろばこ舎」は、からっぽの箱からイメージされた名前なので、ウェブも箱っぽく作ってみたかったんです。

はじめはコンテンツ全体に2pxのborderをかけつつ、20pxのmarginを空けていたのだけど、なんだかダサさがぬぐえなかったので、それはやめました。

↓最初はこんなでした

完成版では、カテゴリーや見出しを背景色で分けています。箱っぽさは消えてしまったけれど、ダサさも薄れた気がしています。

・ハンバーガーメニュー
今のところ、挙動もいいかんじ。でもタイミングによって、開くときにスムーズでないような。ブラウザのせい? でも同じブラウザで開き方が変わるときがあるのはなんで??

・スムーズなスクロール
1枚の画面中をアンカーリンクで行き来する仕様なので、シュル〜っと滑らかに移動してほしくて。CSS「scroll-behavior: smooth;」で実装したものの、端末やブラウザによって効いてくれない……。

JavaScriptだと難しそうなのでこの方法にしたのだけど、ちょっとこれは修正したいかもしれない……。

・メニュー固定&いつでもトップに戻れる「↑」
メニューを上部に固定しつつ、右下にBack to topの「↑」ボタンを置きました。「↑」のデザインは気に入っています。スクロールがね……。

・スルッとしたフォント
今っぽい雰囲気にしたくて、CSS「font-smoothing」を入れてみました。ビフォーアフターの違いが微妙すぎて、ちょっとよくわかっていません。もうすこし、スルッとさせてみたい気もします。

・ファビコン
ロゴがないサイトなので、どんなのにしようかと悩んだのですが、現状の「し」になりました。本番反映させてみてから、「なんだかホットペッパービューティーみたいだなー」と思いました。

のちのち入れ込みたいこと

・スムーズなスクロール
・worksの画像をサムネイルにしつつ、クリックしたらスマートに拡大&解説が出てくる仕様にしたら、かっこいいんじゃないかしらって
・one minute tipsを、もすこし再生しやすい雰囲気にしたい……

作ってみて思ったこと

・もうすこしJavaScriptを書けるようになれたら、制作も閲覧も、もっと快適になりそう。

さて今回は、しろばこ舎Web制作のあれこれをご紹介しました。

しろばこ舎では、Photoshopのあれこれを行なっています。今後とも、どうぞよろしくお願いいたします。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

読んでくださいまして、ありがとうございました。ご支援くださったサポートは、しろばこ舎の「ここぞ!」というときに使用させていただきます。現時点では、Web系もくもく会やPhotoshopワークショップの開催を予定しております。

ありがとうございます!
Webのことをいろいろやる「しろばこ舎(Office Shirobako)」を運営しています。Photoshopが得意で、ご依頼に応じていろいろ作ります。趣味はDIYと献血、それから食べ放題めぐり。愉快な夫と、2歳のむすめと暮らしています。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。