Home > スポンサー広告 > 集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/131-76bd8b7e
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント

Home > CMS > 集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント

集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント

  • vanillate
  • 2015-02-13 Fri 11:36:45
  • CMS
cms_2015-02-13.jpg

いままで、WordPress、カラーミーショップ、他CMSなどへコーディングする時、実際には複数の工程が存在していますが、一気に考えがちでした。
その方法も大事だと今も思っていますが、見方を変えて、集中できるようにする考え方、つくり方を考えてみました。

WordPress、カラーミーショップ、他CMSなどシステムで必要な基本工程

CMS系のコーディングで必要な工程は以下の様なものかとおもいます。

・カンプ画像から素材を書き出す
・HTML(html4.01/html5)+CSS(CSS3)コーディング
・jquery系のフロントエンド的な動き
・CMS側のプログラムに合わせた独自タグへの対応
・CMSにあるDB内のデータを足したり引いたりといった簡単なプログラミング
・CMS側のプラグインファイルを微調整したりといったPHP+HTML+CSSな操作(←WPのみ)

※静的HTMLファイルとするのか、CMS側に入れ込むのか、という課題もありますが
事前の工程や打ち合わせでできるので、除外しています。

従来の方法:CMSを中心とし、一気にすべて実装する

一気にすべて実装する場合、デザインの崩れ、コードの調整、動きの確認がすべて同時に確認できて、仕上がったときには納品物になっている、という理想の形です。
同時にテストできるので、効率がよさそうですが、複数の考え方を脳内で走らせるのでパフォーマンスにムラが出やすいです。

長所:
・はじめて触るシステムでは、少しでも形になったほうが「やっている」感が出るのでいいかもしれません。
・すべての知識にすごく自信がある場合にはこの方法が早いかも
・気分はアジャイル♪
・小規模ならこれが一番早いです。

短所:
・どこまで現在進んでいるのかがわかりづらいです。
・プログラミングやプラグイン調整で悩んでいてベースコーディングが進んでいなかった、みたいなことに陥りやすいです。
・全体ができた後にエラーが山積みになっていることがあります。

つい最近まで、この方法を主にやっておりました。
けれど、請け負う案件によっては、短所への処理が大変になってきたので、他の方法も考えてみることにしました。

★この方法が有効な場合もあるので、判断が大切だったりするのですが。。

ブレークポイントを分けて進行する

要は、個人レベルで各フェーズを分業するってことなのです。
偉そうに言うようなことでも無いのです。分業化のいいところを真似してみる、という方法です。

ブレークポイントを分けていくことで、中心となる技術や考え方に集中することができます。各ポイントごとにタスクを切れますし、どこまで進んだか、進行もしやすくなりました。

ブレークポイントの設定は、こんなイメージ。
1:コーディング(ローカルファイル ※CMSにはまだ載せない)

・カンプ画像から素材を書き出す
・HTML(html4.01/html5)+CSS(CSS3)コーディング

2:CMSに1を載せます

・CMSに1をのせて、表示ずれが起こった時は微調整をしておきます。

3:基本的な動きを書き込み→仮テスト

・jquery系のフロントエンド的な動き
・CMS側のプログラムに合わせた独自タグへの対応

4:プログラミング

・CMSにあるDB内のデータを足したり引いたりといった簡単なプログラミング
・CMS側のプラグインファイルを微調整したりといったPHP+HTML+CSSな操作(←WPのみ)

長所と短所

長所:
・スケジュールがしやすい/無理のないタスクとして切り出しやすい
・各ブレークポイントでテストできるので、どこでエラーがあるのかわかりやすい
・ある程度システムの動きがわかっていると、高速ですすめられます
・どこまで進んだか、クライアントさんにも示しやすいです。
・もし、どこかを誰かに頼むときも、頼みやすいかもしれない

短所:
・ブレークポイントを分けすぎると、逆に時間がかかってしまうかも。


私は、最近この両方のやり方を切り替えて作業をするようになりました。

大切なのは、たぶん、「どこ」に集中するか、ということなんです。
全体を見渡すこと、各ブレークポイントを見ること、その両方が大事。

考え方と感覚の問題なので、まわりからみたら、違いなんてほとんどわからないレベルなんじゃないかなぁと思います。けれど、すこし整理すると脳内がすごくスッキリしたりします。

普段のやり方にとらわれず、
さらにコツコツできるように改善していくのって大事ですねー。
時折はしごとの仕方の見直しをして、より良い仕事ができるようになればいいなと思っています。

ご参考にどうぞ。
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/131-76bd8b7e
Listed below are links to weblogs that reference
集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント from バニデザノート

Home > CMS > 集中と選択のしかたを切り替えて、CMSへすばやくコーディングするヒント

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。