wordpressでのブログ制作日記(デザイン編〜参考にしているサイト)※随時更新
Wordpressでブログを制作するにあたり、現在Illustratorでデザイン中です。
今回見やすさ重視ということで、あまり凝ったものにするつもりはないので、できるだけさくさく進めたい。
・・・けど、やっぱりデザイン段階でいろいろ壁にぶち当たります。
その際はgoogle先生に頼るわけですが、参考にさせてもらったサイトをご紹介して行きたいと思います。
※制作中なので随時更新です
WEBサイトのサイズ(横幅)を決める
必読!5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG
レスポンシブにはしないのですが、それぞれのサイズの参考にさせていただきました。
あとはアフィリエイトバナーを貼るために、A8.netとバリューコマース、あとポイントサイトげん玉で地味に小遣い稼ぎ中なのでこれらのバナーサイズを確認。
「この場所に入れるならこのサイズだな〜」というのを考えてメインカラムとサイドメニューの横幅を決めました。
レイアウトを決める
どこに何の情報をどういれるか?どういうデザイン傾向なのか? というのは、主にフリーランスのWEB関係のみなさま(そうじゃない方もいます)のブログを参考にさせていただいてます。
きっとコーディング時などにも参考にさせていただくかと思います。
※順不同です
※はてなブログのリンク挿入機能で出たままのタイトルにしています
- ホームページを作る人のネタ帳
- Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。
- ウェビメモ|メモしておぼえるデザインブログ
- デザイナーのイラストノート
- すしぱくの楽しければいいのです。
- OZPAの表4
- 四畳半ワークス
- miMemo(ミメモ)
- あかつかゆうこのブログ(仮) 女性向けデザインが好き!
- Handy Web Design | Webデザインやグラフィック制作など、デザインに関する役立つ情報を発信しているブログ
- Webデザインレシピ
- フリーランスWebデザイナーの仕事
やっぱみなさんプロだけあって色々こだわってて、これといった傾向がつかめない!笑
ただ、2カラム構成でサイドメニューは右というのはほとんど共通してました。
私もそれでいきます。
特に参考にしたページ(リニューアル記事)
上記サイトの中でも、「ブログをリニューアルしました」という内容の記事は特に参考になりますね!
なぜ今のレイアウトにしたのか、どこが不便でどう直したのか、とてもとても参考になります。
ので、別途ブクマ。
- Webクリエイターボックスを(プチ)リニューアルしました | Webクリエイターボックス
- ポートフォリオサイトをリデザインしました! | Webクリエイターボックス
- 「ホームページを作る人のネタ帳」さんのリデザインをしました | Webクリエイターボックス
- ブログのリデザインをwebクリエイターボックスに依頼してみた*ホームページを作る人のネタ帳
- ブログをリニューアルして離脱率が約30%減!関連記事の表示やサムネイルなど制作方法と考え方をまとめてみた|すしぱくの楽しければいいのです。
- ぱくたそ大規模リニューアル完了!もっと使いやすくを考えた新旧比較と追加機能|すしぱくの楽しければいいのです。
- OZPAの表4をフラットな感じにリニューアルいたしました:) | OZPAの表4
- PC版に続きOZPAの表4のスマートフォン用テーマも作成いたしました | OZPAの表4
- サイトをフラットデザインにリニューアルするに当たって考えたこととか気をつけたこと | OZPAの表4
とりあえず今はこんな感じ!
そして今ふと気づきましたけど、いや気づく気づかないのレベルじゃない話なんですが、記事ページも作らないといけないんですよねデザイン…
見出しデザインとか色々細かい部分も考えなきゃだね…
SNSボタンもなにをつけるか迷うなぁ。多すぎても良くないだろうし。
とりあえずfacebookとtwitterとpocketかな?はてブが迷うなぁ〜
ていうかポートフォリオサイトも一緒に作りたくなる。
でも訳あって今は分けたいの。がんばろう。
HTML+CSSデザインテンプレート
デザインが終わりました〜切り出しました〜
次はコーディングですが、商用利用も可能でクレジット表記もなしでいいというすばらしいサイト様のものを使用したいと思います。