非エンジニアのデザイナーがWordPressテーマを自作して行き詰まったポイントこんにちは、産休目前デザイナーのニシです。最後に1つ記事を書いて休みに入りたいと思います。先日、BPSデザインチームのサイトをリニューアルしました。デザインはsugimuraさんが担当し、ライティング・コーディングは私が担当しました。私は元々エンジニアではないのですが、WordPressテーマくらい作れるようになっておきたいと思い、修行がてらコーディングをやらせていただきました。いうことで今回は、非エンジニアがWordPressテーマを自作して行き詰まったポイントのメモ記事です。初心者向けなので注意してください。BPSにはデザインチームが存在しており、これまで開発+デザイン案件の、デザイン部分を担当しておりました。デザインチームが存在し、徐々にスキルアップもしてきているので、デザインメインの仕事もどんどん受注できるようにしよう、ということで数年前に作ったまま放置されていたデザインチームLPを1つのサイトとしてリニューアルする運びとなりました。SEOを「デザイン制作」でキーワード狙うと、競合がたくさんいて難しい。世の中のデザイン会社の多さよ...。いうことでBPSの強みである「システム開発」と「デザイン制作」の複合キーワードで狙ってみよう、と試みた構成となっております。Rails」「Laravel」などの具体的な開発言語も盛り込むことで、BPSの提供サービスと検索ワードが合致し、CVが高まるはず、という狙いもあります。デザインの仕事を受注するためのサイトなので、美しいデザインにこだわっています。Webサイトは見た目だけでなくアニメーションも重要なので、そこは私が頑張っています。1でも触れましたが、質の高い開発力を提供できるのがBPSの強み。全体的にデザインの話だけでなくシステム開発の技術力の高さもアピールした構成・ライティングとなっています。実際、BPSの開発力は質が高いので、自信を持ってライティング出来ました。以下のような感じで開発すすめました。フロントコーディングの場数はそれなりに熟しているので、特に問題は起きませんでした。デザイナーだからSPデザインも不要(キービジュアルだけ作成)。コーディングしながらデザインする勢いでガリガリ進めます。レスポンシブなので、SPビューになっても大丈夫なようにマークアップだけ気をつけます。下図のようにPCビューで写真+文言が交互に入れ替わって並ぶデザインでも、html上では同じ順番で並べ、CSSで交互に入れ替わるよう記述します。すると、SPの時CSSを切り替えるだけで済むので楽です。