50の質問ありがとうございます😊!書きたいとこだけ書きました!
普段はコーダー、WPエンジニア、SEOコンサルタント、WEBデザイナーとか色々やってるのでhtmlは庭です。

テンプレ配布先:Ryoryuka(ラテ/ヒフミ様)

 

●Q01.個人サイトを持ったきっかけ・理由は?

当時の事をもう覚えていないんですが、
作れる技術を持ってるのに作らないのは勿体ないと思うからです。

 

●Q12. どうしたらおしゃれなサイトデザイン作れる?

Webデザインギャラリーサイト「SANKOU!」さんは更新頻度が高いのでよく最新を見てます。
おしゃれ=流行ということならここ参考にすれば十分かと。
アニメーションがなければどうしたって物足りない時代なので、スクロールアニメーションやホバーエフェクトを参考にします。
デザインはかっこいいのから可愛いのまで、選り取り見取りです。

ただ「個人サイトのお洒落」の感覚からは外れているのかも。
個人サイトは文字が小さくてこじんまりしたイメージがあります。最近の企業サイトは文字16px以上とか横幅最大限活かしたダイナミックなデザインが多いです。
でも最前線の人が作るサイト見て損はないと思います。

おしゃれであることより機能的であることを選ぶ場合、pixivやピンタレスト、Xなど大手を参考にします。
サイトに来る人が馴染みのあるプラットフォームを真似ることは使いやすいことに繋がると考えています。

 

●Q16. Web媒体で読みやすいフォントが知りたい

・ヒラギノ+MS Pゴシック

長文記事なんかはスタンダードにお勧め。可愛いと真面目の間を取った絶妙なラインのヒラギノが好き。Windowsには多分入ってないので無難なMS Pゴシック。

・Notosans

汎用性が高いので主にこれ使います。
Googlefontなのでどのデバイスでも同じ書体が表示出来るかつCSSで自動カーニングが効く、日本語が多い。縦文字にも強い。WEBフォントの王者。英数字はなんか微妙。

・Zen Kaku Gothic

Noto飽きたしちょっと洒落た感じが出したい時。Googleフォントです。

・游ゴシック

おしゃれに見えるけど古めのWindowsだと細くて読みにい。

・メイリオ

ちょっと丸い感じがアホエロ小説に合うんじゃないかな。尚且つ読みやすい。でもApple系には標準で入ってないのかもしれない。

 

絵描きなので、小説に最適な書体はわからない…3点リーダーの見え方とか気にするんですか?なるほど。
でもピクシブなんかは何だろ?メイリオに見えるけどデバイス標準かな。普通にサラサラ読んでます。

 

●Q17. どうやって小説執筆のモチベを保ってる?(イラスト漫画の制作もどうやってモチベ保ってる?)

モチベの保ち方本当に人それぞれだと思うんですが、やはりインプットをたくさんすることです。
本を描くために関連書籍10冊以上とか買って追い込みます。サイトの更新はなんか気まぐれですが、クリスタを開いて作業することが多いので、息抜きにサイト用の絵描いちゃいます。
あと描きたいカプのネタツイ禁止。吐いて満足しちゃうやつ。これはネタ豊富じゃない私にはとても大事。

 

●Q26. Webデザインのこだわりを教えて!

このサイトで言えば、画像と文字で左右の余白を変えているところです。(スマホで)
画像の表示幅は95%、文字の幅は85%とかにしてたと思います。
漫画は極力大きく見せたいけど、文字は左右ギリギリに表示してると見栄え悪いですから。

デバイス幅の数値でCSS切り替えできる方法は
@media screen and (max-width:640px) {
ここに640px以下の時反映するCSSを記述
}

です。メディアクエリの書き方は半角スペース足りないだけでも動かないのでお気をつけください。

 

●Q34. サイト制作で参考にしてる支援サイトや書籍

 

・HTML5マークアップ最短攻略ガイド 浜俊太朗 (著)

HTML本色々読んだけど一番覚えてる本はこれかな…。
XHTMLからHTML5になった頃、sectionやarticleやら新しいタグの使い方が分からなくて勉強してる時に読んでました。
付属のHTML5カルタが面白かったので楽しく勉強できた本です。
HTMLの文法系を学ぶと、要素打つ時の名前や入れ子構造に迷いが無くなるので、極めたい人におすすめです。

 

・画像ファイルネームの付け方のルールで参考にした本(タイトル忘れました)

なんか分厚いCSS設計の本だったと思う…
画像のタイプ_ディレクトリ名_画像の説明_修正回数.jpg
みたいなファイルネームの書き方のルールが探しやすくて凄く気に入っています。

 

・WordPressセキュリティ大全 吉田 哲也 (著)

WordPressの人は本当にこれだけは読んどいたほうがいいかなって思います。
CMSを自分で管理することの危険性を知らない人がいるなら是非。

 

・小さな会社のIT担当者のためのセキュリティの常識 那須 慎二 (著)

セキュリティの歴史とか。普通に読み物として面白いです。
最古のウイルス、クリスマスワームの話とかホラーみがあって好き。

 

・Web標準の教科書 益子貴寛 (著)

思い出深い教科書です。これもブラウザの歴史系の話が面白い。
その昔、名だたるブラウザ達とインターネットエクスプローラーのブラウザ戦争の話が好きです。
IEが嫌われている理由は一般人より主に苦しめれらた技術者の殺意。

 

・SEO検定公式テキスト2級、1級

SEOの本たくさん読んだけどこれが一番良くまとまっていて気に入っています。流石協会の本って感じ。
最新版だと恐らくAIに対する事も載っていると思います。
1級持ってようが検索エンジン回避してる同人サイトには何ら役に立たないんですけど、
自然検索のアクセスを伸ばしたいならヒントになります。
SEOは記事の質が一番大事と言われていますが、個人的にはHTML文法も大事です。やるやらないで順位が大分変わってきます。

 

●サイトの自作デザインを紹介して!

このサイト全体自作なので、例えば利用規約の文章とかもオリジナルですから、他の個人サイト見たときに「参考にされてるな~」というのがわかりやすいです。全然ええですよ。

サイトデザインもシステムも誰かこのままテンプレにして配布でもなんでもしてほしいって思ってます。
だって楽だよコイツ…OGPもちゃんと出来るようにしてあるよ…
テンプレのアップデートとか管理する余裕がないので自分で配布する予定はないですけど。

テンプレ量産される方ってどうしたってデザインが偏るから他人から募集してもいいと思う。
個人的にはギャラリーを何でもかんでもJavascriptでライトボックスにするのよくわかんない。

 

●Q38. メッセージ関連のトラブル対策してる?

doさん開発のいいねボタンからだとネガティブコメントが来ません。そもそもメッセージを送れる事自体初見で分からない所が良いと思います。

問合せフォームから稀に変なメッセージが来たら、WEB解析の勉強相手になってもらっています。
「迷惑行為を見つけたら(いろいろな手段で)解析します」てサイトの規約に書いておけば、後ろめたさを感じなくて良いです。

最近数か月振りに稀タイプの人のアクセスがあったんですが、
貼っていた罠が無駄にならず済んだとニコニコしていました。小学生かよみたいなモチベをくれる存在です。

しつこいアンチが付いた事無いのですが、その変の回避方法は普通に.htaccessファイルでIP除外とかで良いのではないでしょうか…1行足すだけとかじゃないっけ。
そういう事が出来るから、マシュマロじゃなくてあえて個人サイトに奇妙なメッセージを送る人を見ると情報格差を感じますね。

 

●Q39. サイト移転(引っ越し)したことある?

WordPressは「All-in-One WP Migration and Backup」プラグインのお陰で今や引越しも一瞬です。本当に生まれてくれてありがとうございます。
例え有料になっても手放せる気がしません。

 

●Q41. いま借りてるサーバー、どうやって決めた?

リトルサーバー様 ワードプラン
成人向けOKなサーバーを探して辿りつきました。(詳細は公式サイトをご確認ください)
価格もかなり良心的で、月195円で個人サイトが運営できるならお安いと思います。(1つ下のプランならもっと安い)
無料で使えるのはサブドメインですが、独自に拘る理由も無いので。

ドメインは.jpを選んでいます。
同人サイトで.comを使うことに抵抗がありました。comの意味は「商業」なのでね…あんま気にしなくていいと思うけど。

 

 

●Q43.サイト更新各手順をラクにする工夫してる?

CMSを存分に活かして楽に更新できる仕組みを作りました。
絵を投稿するだけなら、ログイン~投稿まで30秒で出来るレベルに持って行ったので、かなり快適です。
スマホもいけます。

なので出来ることなら人様の個人サイトを作りたい側なんですけど、
更新手間な静的HTMLサイトをお勧めできるわけもなく、CMSで作ってあげるにも管理面で責任が持てないから無理なんですよ。
個人サイト制作請け負う人がほとんど居ないのってこれが原因じゃないのかな。期間限定の企画サイトならまぁいけるかも。
あと個人サイト作りたい人って大抵自力で作ってみたい人だったりしそうなので、邪魔せんとこ…ってなる。

 

●Q47.サイト更新作業で1番面倒な手順は何?

今はほぼシステム化したのでラクですが、いいねボタンからコメント来た時の返信作業。
前も面倒では無かったですけど圧倒的に早くなりました。
実装事例記事はこちら

 

●Q48.CSS初心者でも学習しやすいおすすめのサイト

勉強=生書籍が一番楽しいと思っているので、本片手にコード打ったりコードを紙に書いたり、めっちゃ本に書き込んだりするのがおすすめです。
最近では動画学習とかも面白いと思います。
その場しのぎで良ければチャッピーとかにコード丸投げして聞くのが手っ取り早い。

ただHTMLやCSSがどんだけぐっちゃぐちゃでも、サイトがちゃんと見えてれば何ら気にしなくて良いですよ。
検索エンジン回避してる個人サイトならね。

Googleみたいな検索ロボットに内容を理解しやすくさせるために文法というものがあるので、検索に出す気がないのに入れ子構造だのHタグなど「じゃかぁしい~~」って思っておいていいです。
iframeが非推奨だろうが好きなら使っていいです。別に使えなくなったわけじゃないし。(スマホは工夫しないと見にくいですが)
勉強はほどほどに見た目はテンプレに委ね、空いた時間を全部創作に使ってくださいませ。

もうサーバーとドメインの違いを理解するだけでも優秀、テンプレ使って実装できたら天才、更新続けてる人は神。俺はただの仕事人。

 

●Q50. SNSで個人サイト関連情報を集めてる?

一応WEB系人フォローしまくってるアカウントあるんですけど、たまに見ておいた方が人権が助かります。

脆弱性情報とか値上がり情報とか、怖いもんを見ています。

最近だと「GmailのPOP受信が今年で終わる」とかね。そんなの見逃すことがめちゃくちゃ怖いじゃないですか。

コリスさんが便利なCSSを紹介してくれるのも昔からいい発見をくれます。

 

他に質問がありましたらボタンからどうぞ~

 

送信中です

×

※コメントは最大500文字、5回まで送信できます

送信中です送信しました!

コメント返信

リスト興味持っていただいてありがとうございます!セキュリティ大全は読み応えありますので是非!実際私も使わせて貰ってる技術が詰まってますのでお勧めです😊

りも。