ABOUT  ME

岡山市(将来引っ越し予定。現在は福岡、大分あたりで活動しています。)で、フリーランスのWEBデザイナーをしております。主にHTML5、CSS3、Javascriptを使ったフロントエンドエンジニアとして、WEBサイト制作をしております。

得意としている事

フリーランスとして、一人ですべての作業を行っている為、WEB制作会社のようにすべて一流に行うことはフリーランスには難しいですが、表面つらだけきれいなサイトではなく、裏をしっかりと作りこむ事ができます。

HTML5、CSS3、最新のES6を導入した生のJavascriptやjQueryを使ったコーディングやプログラミングを一番得意としているからです。

こちらのサイトは、数年前に作成したWEBサイトですので、現在は数段レベルが上がっております。よってこちらにはまだ導入しておりませんが、現在はCSS設計の教科書をベースに、FLOCSS、BEM、OOCSSなどを導入したモダンなCSS設計を導入しています。

また、タスクランナーのgulpによる自動化、POSTCSSによるCSS4の先取りなども行っており、コーディングに関して全体的にモダンな制作環境も取り入れております。

私にご依頼いただくメリット

私は、表面つらだけきれいな、セマンティックなコーディングを全くできていない、欠陥住宅のような、WEBサイト制作は行いません。その様な裏側のしっかりしていないWEBサイトは、W3Cの仕様に準拠していないので、新しい端末が出るとすぐに崩れてしまう可能性があります。

家で例えると屋根裏のような、目立たない存在の、WEBサイトのソースコードですが、セマンティックなコーディングをすることにより、アクセシビリティが上がり、目が見えない方も音声ブラウザを使って耳で聞くことが出来るようになます。それによって、障碍者の方々への社会貢献になり、企業イメージもアップし、そのような障害のある方からのコンバージョンも期待できるようになります。

もちろん、プロのWEBデザイナーが見て、本当に優秀なデザイナーさんに関しては、WEBデザインの本質を一番理解されているので、決して表面つらだけきれいなサイトは作りません。しかし、一部クライアントさんのWEBサイトを自己表現のキャンパスとしてWEBサイト制作を行ってしまう残念な方も一部見受けられます。

そのような方にご依頼してしまうと、とても表面上きれいなものの、プロのWEBデザイナーやWEBプログラマーが、ソースコードを見ると、残念ながら保守性、管理性、拡張性に欠けるコーディングをされている方が、少なからず見受けられるというのが、現在のWEB業界の現実です。

餅は餅屋といわれる通り、デザインのきれいさについては、とても優秀ですが、その代わりコーディングやプログラミングは、フロントエンドエンジニアやWEBプログラマーに軍配が上がる事が少なくありません。

その様なWEBサイトを作ってしまい、始めはぬか喜びが出来たものの、長期の運用の際に泣きを見たというクライアントさんが後を絶ちません。

裏をちゃんと作ると検索エンジンに好かれます。

あまりクライアントさんの間では知られていませんが、セマンティックなコーディングを行うことは、google検索エンジン(yahooも現在はgoogleの検索エンジンアルゴリズムを採用しております。)のプログラムである、クローラーにとって、WEBサイトの意味を正しく理解することにとても重要になっております。よって、ここをしっかり行う事で、劇的ではないものの、検索エンジン上のWEBサイトの順位に良い影響があると言われています。

このような検索エンジン上のWEBサイトの順位を上げるための、工夫のことをSEOと言います。(SEO対策という方が多くいますが、適切な技術用語ではありません。また、SEOの本来の意味は、セマンティックなコーディングをすることにより、WEBサイトの内容を適切にクローラーに伝える事です。しかし、現在は意味がすり替わってしまい、このような意味で使われることがほとんどという状況になっております。)

SEOは、WEBサイトのコンバージョンにとって最も大事なことですので、造形美(デザインのきれいさ)より、よほど大切な要因となります。造形美は、あくまで自己満足と考えられますので、プロが作った真っ当なサイトであることさえ閲覧者に伝われば十二分であると、考えております。その証拠に造形美とコンバージョン率にはあまり相関がないとWEB業界では言われております。

私のこだわりとお願い

前置きが長くなってしまいましたが、最後に結論をお伝えさせて頂きます。私は、安かろう早かろう悪かろうという、ファーストフードのようなWEBサイト制作は行いません。

また、表面つらのきれいさにこだわった自己満足なWEBサイト制作も行いません。裏側にこだわった本質的な価値のあるWEBサイトをご提供したいと思っております。よって、納期の長さとお値段はそれに見合った分お願いさせていただきたいと思っております。

ただし、納期の面はご理解頂けても、予算の面がどうしても厳しいというクライアントさんに関しては、テンプレートという型を使って、画像や文章などのコンテンツをできる限るご用意していただくことによって、ご予算内に収めることも可能な場合もあります。

つまり、テンプレートという型にいただいたコンテンツをはめ込むだけに作業を限定することにより、作業時間を大幅に短縮する事が可能になります。それによって。低予算でもWEBサイト制作ができる可能性があるという事です。ただし、安くなる分拘束時間を短くしていただく必要がありますので、デザインのオリジナル性や、こだわりを捨てていただく必要がある事はご理解ください。

その他スキルについて

私は、ある程度のデザインはできますが、フロントエンジニアよりなので、ベジェ曲線を使った絵心のあるイラストのスキルがなく、そのあたりはフリーの素材を使うか、素材をご提供いただけるとありがたいのです。

ワードプレスは、オリジナルのテーマをheader、footerなどに分けるくらいの最低限の作業くらいまでは出来ます。フロントなので、それ以上のことはまだできません。

サーバサイドはPHP工房の問い合わせフォームの導入は成功していますが、それ以上のことはまだできません。

WEBデザイナーの世界はあまりに行う事が広すぎるため、すべて一人でこなすのが実質不可能な状況になっています。よって、不得意な面はあまり深く追及されない方を対象にさせていただいております。ないしは外注費を頂いて、外注する形を選択したいと思っております。

制作環境について

制作環境は、HTML5、POSTCSSの一部を使い、FLOCSSを参考にしたモダンなコーディングを行なっています。(2017年現在)

POSTCSSに関してはトランスパイルしたファイルをお渡ししますので、恐らく問題はないと思いますが、 トランスパイルだけして、圧縮、コメントアウトの削除をしない状態でお渡ししたほうが良い場合は、そのように対処しますので、 お伝えください。

CSS設計の教科書をベースにモダンなCSS設計で作っているので、詳細度を上げず、タグに依存したCSSにならないように、セレクタにタグ名はつけない、コンテナーとコンテンツを分離してかつ、こちらも同じように詳細度を上げないために、子孫セレクタを使わない、タグ名がない分どの要素のCSSかわかりやすくする為に、簡略化したBEMを採用するなど下記参考サイトのような特徴があります。

もちろん子孫セレクタが使えないわけではありません。必要であれば使えます。モジュール(コンポーネント)化して再利用性拡張性を確保する為にこのようにしています。

ご参考(こちらの考え方に近いです。)

HTMLについて

HTMLはxhtmlからスタートし、現在はHTML5を使っています。

セマンティックウェブ(日本語では意味論)という、検索エンジンのクローラに情報が認識できるようにコーディングすることが、ある程度求められますので、重箱の隅はつつきませんが、クローラーが内容をちゃんと理解できるようにコーディングをしております。

javascriptについて

javascriptは、ES6を導入しつつ、babelでES5にトランスパイルしてを使っています。

jQueryもある程度使えます。ただしすでにjQueryは役割を終えていると考えておりますので、今後はVueかReactを取り入れていこうと予定しています。

ブレークポイントについて

ブレークポイントをemにしています。pxの方がわかりやすいというメリットがありますが、その分、バグが多いというデメリットがあるためemを採用しています。

わかりにくいというデメリットの対策として、下記のような説明を付けるようにしています。これで問題ないと思っております。

/* 説明
・メディアクエリーズ
(min-width: 34em)544px
(min-width: 48em)768px
(min-width: 62em)922px
(min-width: 75em)1200px
*/

またブレークポイントは、ツイッターブートストラップを参考に上記にしております。その他のサイズは成り行きに任せます。

参考情報。
ブレークポイントをemにしている理由
コリスさんの記事

自身の写真

GALLARY

由布観光協会

和風の高級感を表現するをコンセプトに作ったサンプルサイトです。

(ポートフォリオサイトなので、実在するサイトではありません。)

こちらのポートフォリオも、当WEBサイト制作を受注するための営業用サイトも数年以上前に作成したものなので、現在はデザインからコーディング、プログラミングまでスキルが数段上がっています。よって、これらの作品を見て、プロの方はあまり辛口コメントは、控えていただければありがたいです。(笑)

実際にお仕事につながるお仕事であれば、もっとクオリティーの上がったポートフォリオをお見せできますので、問い合わせフォームよりお問い合わせください。

由布観光協会のPCサイズの画像
PCサイズ
由布観光協会のスマートフォンサイズのファーストビューの画像
タブレットサイズ
由布観光協会のスマートフォンサイズのファーストビューの画像
スマートフォンサイズ
由布観光協会のスマートフォンサイズのファーストビューの画像
セカンドビュー

MAP(サンプルとして天神を表記しています。)

CONTACT