このサイトについて
使用スキル
- HTML
-
前回同様、構造体をきっちり作ることを重視しています。特に今回はWordPress化するので、ココをしっかりしておかないと、パーツ分けしにくくなるので、共通する部分とそうでない部分とを意識して設計しました。
- CSS
-
今回はSassを使用するという(個人的)テーマがあったので、CSSファイルは全くと言っていいほど見ていませんし編集していません。
CSSの設計に関してもBEMの項に書いてあるので、ここで語るべきことは特にありません。 - jQuery
-
サイドバーのfixed処理に少し使用しています。あとはスムーススクロールくらいでしょうか。
プラグインではLightboxを入れましたが、おまけみたいなものです。
- WordPress
-
そもそもコレの為に作ってます。
ACFをはじめとして、プラグインを幾つかインストールしています。
- Sass
-
全体的に導入。SCSS記法。コンパイルはコマンドで「sass --watch --style expanded」。
- BEM
-
全体的に導入。標準的なBlock__Element型。Modifierに関してはほぼ未使用(後述)。
- OOCSS
-
一部に限定的に導入。BEMのModifier(の一部)をこちらで代用してみるテスト。主に文字色や背景色なCSS中の装飾に該当する部分に対して使用。
ちゃんとCSSを設計しないと構築が難しいことが分かりましたので、本格的な実装は改めて勉強してからにしたいと思います。
コンセプト
- モバイルファースト
- 全体的な構成をモバイルベースで作成してみました。 とは言え作業後半はデスクトップベースで確認することも多く、難しさを痛感しました。おそらく自分自身のWebサイト利用体験としてデスクトップがベースになっていることも影響していると思います。
- デザイン
- コンテンツ
- 基本コンセプト
- 『往年の個人サイトの復権』。
現在では、CGC(Consumer Generated Media)として、twitter、Facebook、InstagramなどのSNSやBlogが人気ですが、過去にはユーザーが一からWebサイトを構築・公開する個人サイトというものが隆盛を誇りました。
今日では上記の各種サービスを用途によって使い分ける(散発的な短文ならtwitter、人間関係を基軸にするならFacebook、モバイルフォンベースの写真投稿はInstagram、日記的なコンテンツ及び広告収入ならBlog)のが主流となっています。
-
-
-
-