w
a
t
a
r
u
d
e
s
i
g
n
top
concept
works
blog
price
about
contact
t
o
p
c
o
n
c
e
p
t
w
o
r
k
s
b
l
o
g
p
r
i
c
e
a
b
o
u
t
c
o
n
t
a
c
t
menu
close
WATARU DESIGN
TOP
.....
WORKS
.....
WATARU DESIGN
https://wataru-code.com/watarudesign/
当サイトです。
制作全体で意識したことですが、
・制作目的を明確にする
・これまで学習してきた内容を使う
です。
実装のポイント
・FLOCSSを用いて保守。
・positionをなるべく使わず、flexやtransformでデザインを再現する。
・画像で動的にする部分以外は、pictureタグを使いjpg・pngとWebPとで出し分ける。
デザインに関してですが、当初はOswaldのフォントに合うデザインを参考サイト等で探しベースを作り、それに必要な情報を追加、調整してデザイン的に違和感のない作りにしました(現在はLatoに変更)
実装の途中で制作目的が本来のものとずれてしまったり、デザインの方向性で迷い修正回数なども多く、デザインからWEBサイトを構築する難しさを学びました。
また、ワードプレスの理解を深めるため、制作過程や学習で得た知識を残して行くためにブログを併設しました。
基本的な構成のブログサイトですが、既存のテーマを使うのではなく自作しましたのでワードプレスの理解が深まりました。
制作にあたりブログ記事や参考サイトで高レベルな制作や実装方法を何十種類と見ました。
それにより、今後の課題も把握することができました。
・ブロークングリッドなどの複雑な作りでも表示崩れがないようにする
・JavaScript、CSSでの演出や動きに工夫をする
・ワードプレスの高度なカスタマイズ
・PHPの基礎スキル
などです。
時間はかかりましたが、収穫も多く今度につなげることができたと思います。
仕様
WorPressオリジナルテーマ
ページ数
8ページ
制作範囲
デザイン、コーディング
使用言語
HTML、CSS、JavaScript、WordPress
back to list
制作全体で意識したことですが、
・制作目的を明確にする
・これまで学習してきた内容を使う
です。
実装のポイント
・FLOCSSを用いて保守。
・positionをなるべく使わず、flexやtransformでデザインを再現する。
・画像で動的にする部分以外は、pictureタグを使いjpg・pngとWebPとで出し分ける。
デザインに関してですが、当初はOswaldのフォントに合うデザインを参考サイト等で探しベースを作り、それに必要な情報を追加、調整してデザイン的に違和感のない作りにしました(現在はLatoに変更)
実装の途中で制作目的が本来のものとずれてしまったり、デザインの方向性で迷い修正回数なども多く、デザインからWEBサイトを構築する難しさを学びました。
また、ワードプレスの理解を深めるため、制作過程や学習で得た知識を残して行くためにブログを併設しました。
基本的な構成のブログサイトですが、既存のテーマを使うのではなく自作しましたのでワードプレスの理解が深まりました。
制作にあたりブログ記事や参考サイトで高レベルな制作や実装方法を何十種類と見ました。
それにより、今後の課題も把握することができました。
・ブロークングリッドなどの複雑な作りでも表示崩れがないようにする
・JavaScript、CSSでの演出や動きに工夫をする
・ワードプレスの高度なカスタマイズ
・PHPの基礎スキル
などです。
時間はかかりましたが、収穫も多く今度につなげることができたと思います。