">

元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

のんびりいこうやない。今日も明日も、明後日も。

f:id:chihiro_dayori:20170523173117p:plain

1ニチ1ポブログ

- Since 2017.04 -

WEBデザインを本格的に勉強するなら、絶対に見るべきはてなブログ7選|はてな神7

f:id:chihiro_dayori:20170809082248j:plain

 

はじめに

4月にブログをはじめて、記事を書く中で「WEBデザイン」を勉強することにハマってしまい…現在のブログデザインに至るまでに、かれこれ4回変更を加えてました。

変更理由は「飽き性」というより、皆様の反応を見ながら「改良」を行ってきた感じです。それこそ例で出すなら、ブログはじめて2か月目は、こんなデザインでした(笑)

17年05月30日迄のデザイン

・PC版

f:id:chihiro_dayori:20170808233211j:plain

・スマホ版

f:id:chihiro_dayori:20170808233507p:plain

現在のブログデザインに至るまで、WEBデザインの本を15冊程を読みながら進めてきました。それに加えて参考になったのが、はてなブログ運営のWEBデザインの情報を提供するブロガーの知恵。本とは違い、同じ環境下で物事が語られる為、吸収度合いが全然違います。

そこで、筆者が本を読みながら、合わせて引くほどに見ていたブロガーをご紹介したいと思います。

勉強の仕方はそれぞれですが、はてなブログを運営している方なら、

1.本で「基本的な構造」と「プログラミング用語」を理解し

2.WEBデザイン関連のブログで紹介しているコードを紐解いていく

3.それをGoogleChrome(グーグルクローム)で試しにいじってみる

この勉強法が最強だと思います。

※ご紹介ブログの皆様:勝手にご紹介させていただいております。もし不都合など御座いましたら、すぐご対応させて頂きます。

SPONSORED LINKS
 

1.『NO TITLE』

www.notitle-weblog.com

ブログ運営者様

・「シロマティ」さん / 「詳しいプロフィールはこちら」

・都内で働くWEBデザイナー / 洋楽からカスタマイズなど幅広く記事にされています。

ここがすごい!

はてなブログへの手厚い無償提供にお世話になっている人も多いのではないでしょうか。最近では、無料はてなデザインテーマのSOHOを提供して頂いております。

「今までカスタマイズに手をつけていないよ」という人でも、必見!はてなブログのカスタマイズを一気に紹介する - NO TITLEの記事に纏めて頂いているので、安心して見栄えの良いブログを作成することが出来ます。

筆者はYoutubeの貼り付けを軽くする方法でお世話になりました♬記事はYouTubeを貼り付けても重くならない方法は秀逸で便利すぎた話

2.『LITERALLY』

tsukuruiroiro.hatenablog.com

ブログ運営者様

・「CatNose」さん / ・詳しいプロフィールは見つかりませんでした。。

・「LITERALLY」以外に共同運営で「サルワカ 」も運営されています。

ここがすごい!

筆者は、このブログ運営者様にどれだけの時間、お世話になったかわからない程。それだけ沢山の時間を勉強させて頂いております。はてなブログの中では超がつくほどの有名な方なので、紹介する程でもないですが…

カスタマイズ系の記事も参考になるのは勿論、筆者は“文章の書き方“から“説明の仕方“まで、ブログに関わる全ての内容で参考にさせて頂いております。特に1年でフリーのWebデザイナーになった僕が実行した8つのステップ【独学デザイン勉強方法】 を見て「独学でも勉強出来る」ということを勇気付けられた面もあります。

最近知ったことなのですが、筆者が今まさに勉強している「サルワカ」 もこの方が運営されていることを知り、本当に鳥肌が立ちましたよ(笑)。凄すぎます!

はてなブログテーマ「DUDE」を作成された方でもあります。

3.『Minimal Green』

design.syofuso.com

ブログ運営者様

・「MINIMAL GREEN」さん / 「詳しいプロフィールはこちらから」

「はまさか日記 澄風荘しょうふうそう」も運営されています。

ここがすごい!

様々なパーツ毎のカスタマイズを多く掲載してくれているのが、このブログ。筆者も最初のころ、沢山こちらでお世話になり、カスタマイズさせて頂きました。

最近では『HTML/CSSの覚え方 WEB制作に役立つ便利なチートシートまとめ』を提供して頂き、現在WEBデザインを勉強している筆者としては大変参考になった記事になります。 

4.『Yukihy Life』

www.yukihy.com

ブログ運営者様

・「ゆきひー」さん / 「詳しいプロフィールはこちら」

都内に住む社会人1年目だそうです。Web制作やプログラミングの記事を多く提供して頂いております。

ここがすごい!

あの繊細なブログデザインから勝手に女性をイメージをしていたのですが、どうやら男性みたいで衝撃を受けたのが一番最初(笑)。更にセカンドインパクトで、まだ社会人1年目の1993年生まれと書いてあるものですから、あまりの天才っぷりに力が抜けました(笑)。

『ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ!』『CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】』は使用する方も多いので、恩恵を受けた方も多いはず。

はてなブログテーマの「Naked」を作成された方でもあります。

5.『FOXISM』

www.foxism.jp

ブログ運営者様

・「orefolder」さん / 「詳しいプロフィールはこちら」

・茨城県つくば市在住のウェブサイト運営者

ここがすごい!

・正直、筆者は「FOXISMはもっと知られてもいい」と思えるほど、天才的なブログ。デザインのセンスもめっちゃかっこいいですし。カスタマイズの内容がもう複雑すぎて、正直まったく内容の理解に追いつかない程です。おそらく本当にWEBデザインのことを知り尽くしているのだろうなと思います。

特に『Google検索結果での星表示にも対応させたレビューのまとめ表示カスタマイズ』では、あまりの凄さに笑いました(笑)。

因みに、はてなブログテーマ「ZENO-TEAL」の作成者です。

6.『急がば急いでまわれ!』

georges.hatenablog.jp

ブログ運営者様

・「George」さん  / 「詳しいプロフィールはこちら」

・東京都在住のWEBデザイナー

ここがすごい

・こだわりのカスタマイズが沢山あって、独自のデザインセンスが光る提案が多いのが、このブログ。特に有名なのは『誰でもコピペで簡単に吹き出しで会話形式のブログが書けるCSS』に書かれている「記事中に吹き出しを入れる」カスタマイズ。後、筆者がお世話になったのは、『コピペOK!読者になるボタンやSNSフォローボタンのカスタムCSS』 に書かれているシェアボタンのカスタマイズ。

7.『つばさのーと』

www.tsubasa-note.blog

ブログ運営者様

・「つばさ」さん / 「詳しいプロフィールはこちら」

・サッカー好きなにわかアニオタで、カップ麺とかお酒が好きだそうです。ブログ運営に関しては「雑多ブログ」だそうです。

ここがすごい

・正直、ここで紹介しているブログはどれも「本当にはてなブログなのか」というセンスまる出しのデザインばかりなのですが、何よりもすごいのが、おしゃれなデザインに加えて、ブログのページスピードの速さ

「つばさのーと」では『目指せ最速!はてなブログで表示を高速化するために行った7つの施策 』でも改善方法を書いて頂いております。筆者も、このブログでスピードの概念を学び、そして改善しようと決意しました。

また『リライト好きな方へおススメしたい最終更新日を自動で表示するカスタマイズ 』では「更新日を自動表記させる」という神業が紹介されています。

これは「情報がフレッシュな内容なのか」を読み手に伝える上でも、とても有効な手段だと思いますので、参考にされて見て下さい。

最後に

このはてなブログ界の『神7』を見れば、殆どのことがコピペで出来ます。

もし「ブログの見栄えを良くしたいが、自らで構築するのが大変だな」と感じる方は、これらのブログを見て、提供されている内容を拝借するのが、一番近道だと思います。

そして「これから勉強したい」という方にも、これらのブログで提供されているコードを、実際に自らで一つひとつ理解していくのが、本当におすすめです!

同じフィールドで勉強出来ること程、最強の勉強法はないと思いますので。

筆者もそうやって4カ月間やってきましたよ。

そして「はじめてWEBデザインをしたい方」には、基礎を学ぶ上ではこちらがおすすめです。

・こちらの記事でも紹介しております。基礎を少しかじって、作業して見たい方におすすめの本です。

www.1nichi1ppo.com

おしまい。 【文字数:3738文字、作成時間:3時間15分】

SPONSORED LINKS