About

自己紹介

Nanase(ナナセ)

Nanase(ナナセ)

フリーランスでWebサイトを制作。

国立大学 工学部 情報工学科卒業。愛媛の小さなIT企業に就職。3年ほど医療系のiOS・Windowsアプリの開発に携わる。結婚を機に仕事を辞め大阪へ移住。自分の能力を試すため、登録販売者と調剤薬局事務の資格を取るなどする。

プログラミングへの未練とデザインへの興味から、Webデザインに注目。オンライン・プログラミングスクール『CodeCamp』にて基本の知識を勉強後、独学でWebデザインを勉強。

その中でCSS設計思想「FLOCSS」と出会い、FLOCSSをメインにコーディング。

使用言語

使用ツール
開発環境

参考テキスト

サイトを作成するにあたって、これまでに参考にさせていただいたテキストを紹介します。実際の現場でどれくらい役に立ったかを「オススメ度」として最大星3つで表現しています。

HTML/CSS

Web制作者のためのCSS設計の教科書
モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

谷 拓樹, 2014，p.215

オススメ度　★★★

サイト作り始め初期にやってしまいがちな命名や何層にも及ぶネストなど、あるあるな問題点を挙げながら改善点を教えてくれます。
有名なCSSの設計思想であるOOCSS、SMACSS、BEMから私が好んで利用しているFLOCSSの紹介もあるので、自分にあった設計方法に出会えます。

Web制作者のためのSassの教科書 改訂2版
Webデザインの現場で必須のCSSプリプロセッサ

平澤 隆，森田 壮，2014，p.296

オススメ度　★★★

CSSの基本を学んだあとは、いかに効率よくコーディングをしていくかを学びます。
Sassを利用すればネスト構造も見やすくなり、メディアクエリごとのコーディングもはるかに楽になります。自分オリジナルの関数を作ってアレンジもできるようになります。

HTML5&CSS3デザインブック

エビスコム，2014，p.464

オススメ度　★☆☆

実際にニュースサイトやビジネスサイトを作りながら、レスポンシブ対応のためにいかにコーディングしていくかが学べます。コンテンツをブロックごとに分けパソコンでは横並び/スマホでは縦並びで対応するという構成は様々なサイト作りで応用できます。

HTML5/CSS3モダンコーディング
フロントエンドエンジニアが教える3つの本格レイアウト
スタンダード・グリッド・シングルページレイアウトの作り方

吉田 真麻，2015，p.256

オススメ度　★★☆

HTML、CSSの基本知識があることを前提とした本で難易度は高めですが、擬似要素を使った装飾の仕方を多く学べます。マウスを載せた際のアニメーションの紹介も様々なバリエーションがあり、サイトの見た目も凝りたい時に参考になります。 サイト作り始め初期にやってしまいがちな命名や何層にも及ぶネストなど、あるあるな問題点を挙げながら改善点を教えてくれます。

JavaScript

jQuery最高の教科書

株式会社シフトブレイン， 2013， p.320

オススメ度　★★★

画面トップへのスクロールやスライドなど参考例がネット溢れている今、なんとなく使っていたjQueryを一から学びたいというときに役立ちます。クリック時のアニメーションからスティッキーヘッダー、タブの実装までサイトの構成に利用される実践的な機能をサンプル付きで紹介してくれるので即戦力な参考書です。

これからはじめるVue.js実践入門

山田　祥寛,　2019,　p.471

オススメ度　★★☆

サイトに動的な機能を追加するライブラリとしてjqueryをよく見かけますが、さらにコード量を少なく、視認性を高めたものがVue.jsであり、最近注目されています。jqueryもいつまで通用するか不明なので、基本を知っておこうと購入しました。
関数を作ったり値を返したりするので、ある程度のプログラミング知識も必要です。

PHP

気づけばプロ並みPHP
ショッピングカート作りにチャレンジ!

谷藤 賢一，2013，p.308

オススメ度　★★☆

少し古い書籍ですが、PHPの基本をサンプルをもとに勉強できます。WordPressを使ったサイトの作成にはPHP言語を利用することがあるので、基本を学ぶために購入しました。商品やユーザー登録のためにデータベースについても取り扱うので、同じくデータベースを取り扱うWordPressへの理解を深めるのにも役立ちました。

SEO

いちばんやさしい SEO 入門教室

ふくだ　たみこ,　2017,　p.256

オススメ度　★★★

SEOの役割から重要性、対策まで教えてくれる教科書です。サイトを作っても検索の上位に来なければ意味がないので、知識ゼロの初心者でも役立ちそうなこの本を選びました。検索エンジンの上位判定のシビアさ、検索ワードの絞り込みの重要性などを知ることができます。おかげで、マイナス評価となるようなSEO対策は回避することができています。

WordPress

WordPressレッスンブック

エビスコム，2019，p.323

オススメ度　★★☆

WordPressを使ってブログサイトを作りたいけれど、そもそもワードプレスって何？どうデザインするの？という疑問に答えてくれます。サンプルサイトを作成しながら一通りの機能を学べます。
欠点として最新のブロックエディタ（Gutenberg）を使って記事を作成するのですが、旧版のクラシックエディター（Classic Editor)の存在には全く触れません。現実では使い勝手の良さから旧版が多く使用されていること・比例してブロックエディタを使用した参考サイトが少ないことから自主学習に苦労した覚えがあります。

［改訂版］WordPress
仕事の現場でサッと使える！
デザイン教科書

中島　真洋,　2020,　p.623

オススメ度　★★★

サンプルサイトを作りながら理解を深めるというのは他の教科書と共通ですが、この本はWordPress独自の関数の使い方を中心に勉強できます。記事のタイトルを表示する関数から記事へのリンクを出力する関数、投稿の種類を増やす方法まで、痒いところに手が届く本です。個人的に一番利用しています。

デザイン

Webデザイン良質見本帳
目的別に探せて、すぐに使えるアイデア集

久保田 涼子，2017，p.195

オススメ度　★☆☆

サイト画像を多く用い、様々なサイトを目的別に紹介してくれる本です。サイトの顔となるイメージカラー別であったり、レストランや美容室などの職業別であったりと分野ごとに分けられているので、作りたいサイトの参考サイトを探しやすくなっています。
HTML、CSSの記述は少量なので、デザインを再現する実力があれば参考となります。