先日、当サイトのデザインをリニューアルしました。
といっても細かいところで不備があったりして、まだちょくちょく修正中ですが。
さて、今回WordPressでサイトをリニューアルするに当たっては多くのサイト・ブログの情報が役に立ちました。というわけで、これからサイトデザインを一新しようと考えているの方への参考、および自分自身への備忘録もかねて、どんなページが役立ったかを一覧にしておきます。
ウェブデザイン
デザインを考えるのに役立つ記事・サイト
・WebデザイナーにおすすめのEvernote活用術 – Webクリエイターボックス
本エントリーの半分ぐらいは上記記事を紹介するためといっても過言ではないです、というぐらいに役に立った記事です。
詳しいことは記事を直接読んでもらえればと思うのですが、簡単に言うと、良いと思ったデザインのページはバシバシとキャプチャ（スクリーンショット）して、Evernoteに溜めていこう！というものです。
この「良いと思ったデザインはとにかく溜めていく」というのが非常に参考になりました。デザインの丸パクリはもちろんNGですが、他の方のセンスを良い意味で盗むためのベストな方法ではないかと思います。
なお、私自身はEvernoteはプレミアムでない上にサイズ縮小するのが面倒だったので、Dropboxにどんどん放り込んでいます。
また、ページ全体の丸ごとキャプチャも使いますが、細かな見出しのデザインや、画像へのさりげないドロップシャドウなど、気になった部分はパーツパーツで取り込むようにしています。
・配色に自信がなくても！Webデザインが好きになる配色ツールと使い方
同じくWebクリエイターボックスさんの記事から。配色についてのツール紹介と使い方です。私も一応カラーコーディネーター資格を昔にとったんですが、そのときに勉強したことをあらためて思い出したりしました。
前述の配色ツール紹介記事でも紹介されている、Adobeによる配色パターンの投稿サイト。すべてそのままの配色が利用できることは少ないと思いますが、どういう色の組み合わせが美しいか勉強になります。
イケてるサイトのデザインばかりを一同に集めたサイトです。ブログデザインなどの場合は「ポータル・ブログ」のカテゴリが参考になります。
こちらは見出しのデザインばかりをまとめてくれているサイトです。h2～h6あたりの見出しタグのデザインを考える際に有用です。
・素人っぽく見えないドロップシャドウのつけ方 – FIREWORKS BROS
Fireworksによるドロップシャドウのつけ方の解説です。とはいえ、Fireworksにこだわらずとも、ドロップシャドウ自体の綺麗なつけ方について、非常によくまとまった記事だと思います。
素材サイト
すべて無料の素材配布サイトです。その上素材データがPSDおよびPNGの両方で配布されていますので、簡単に加工をすることができ（加工もOKのサイトです）、使い勝手が非常に良いです。実際、今回はほとんどのサイトをこちらから使わせてもらいました。
こちらはとくに16×16や32×32のアイコン素材が豊富な素材サイトです。こちらからも何点か素材をお借りしました。
WordPress ＆ JavaScript ＆ CSS
・Wordpress オリジナルテーマの作り方 3.0+ – Webクリエイターボックス
またまたWebクリエイターボックスさんの記事から。WordPressのテーマの作り方としては、この記事がいまのところ一番分かりやすいものではないかと思います。
WordPressのget_terms関数についての詳しい説明です。
WordPressにはcategoryやtagなど様々なものがありますが、じつはこれらはすべてtermオブジェクトの一種であるため、get_terms関数が理解できると、他のget_the_categoryなどの関数を使わなくても様々な処理ができます。
この辺りのことはまた記事にしたいと思います。
・表示内容の切り替え(JavaScript) – KANTENNA
JavaScriptを使って表示内容を切り替える方法です。
コードの行数はやや多いですが、非常に単純で分かりやすく参考になりました。
おまけで自サイトの記事から紹介です。可読性の高いリストデザインの作り方について解説しています。
まとめ
このほかにも多くのサイトを参考にさせてもらいましたが、ここではとくに役立った記事に厳選して紹介させてもらいました。ありがとうございました！
そしてまた、この記事がこれからサイトを作ったりリニューアルしようと考えている人のお役に立てれば幸いです。