非エンジニアのデザイナーがWordPressテーマを自作して行き詰まったポイント

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