プーティ、それは宇宙からの贈り物

実機デバッグ(リモートデバッグ)ならvorlon.jsが便利!

2015年12月18日
Web制作, ツール

Webページのデバッグツールで皆さんは何を使っていますか? 多分、10人に9人くらいは迷わずに「Chrome Developer Tools」と答えるでしょう… はい、私もその10人の中の一人です。 それ以外は、SafariかFirefoxのどっちかしか選択肢がないかと思いますが、 今回は「vorlon.js というデバッグツールという選択肢もありますよ!」の話ができればと思います。 vorlon.js とは? 「vorlon.js」はMicrosoft謹製の「リモートデバッグツール」です。 「リモート」でデバッグできるのが特徴です。 WebページやWebアプリは、普通のPC端末から、タブレットやスマートフォンなどのモバイル端末まで、実に生存領域が広いです。それだけではなく、端末の機種、ブラウザのバージョンなど、変数が多いが故に、実機デバッグは欠かせません。 IEとかAndroidとか… 辛いです… iPhoneの実機デバッグなら「Safari」、Androidの実機デバッグなら「Chrome」、IEならもちろんあの「F12 開発者ツール」を使ってデバッグします。 そう、実機デバッグとなると、メーカー指定のデバッガー以外は使えないので、使い慣れた「Chrome Developer Tools」も威力を発揮することができないです。 リモートデバッグ

企画書・事業計画書の書き方:アイデア編

2015年12月17日
生産性向上

企画書とは、新しいプロジェクトやアイデア、提案などを分かりやすくまとめた書類です。自分が考えたアイデアを実現するためには、まずは他の人に説明し、納得してもらう必要があり、企画書はアイデアを伝えるための大変重要なツールと言えます。しかし、「なにを書いたらいいかわからない」「どこから手を付けたらいいかわからない」と、PCの前でフリーズしてしまう方も少なくないのではないでしょうか?今回の記事では、これまでにweb制作会社、広告会社、IT企業に所属し、企画書や提案書を書いてきた経験から得た、「企画書の書き方」をご紹介します。企画書がきっかけで数千万円の受注をもらえたこともありましたので、ぜひご参考にしていただければ幸いです。なお、web制作会社でのサイト制作の企画や、キャンペーンサイトなどの企画、広告の企画、事業計画書作成向けに書いた記事のため、業界が異なる場合は「ちょっと違うかも?」と思う点もあるかもしれません…ご了承ください。 紙にアイデアを書き出す 企画書を書くときに、PCを使ってすぐ書き始めるという方もいらっしゃるかと思いますが、私は断然紙派です。会社で後輩に仕事を教える時も、紙をすすめていました。PCと紙だと、浮かぶアイデアが全然ちがいます。PCは出来上がったものを打ち込み、ブラッシュアップしていくことには向いていますが、アイデアを広げるためには手を動かしたほうが良いと思います。 A4メモ書きの活用 では、具体的に何を紙に書き出したらいいのでしょう?そこでおすすめしたいのが、「A4メモ書き」という方法です。この方法は、ベストセラー「ゼロ秒思考」で紹介されていたもので、シンプルながらも効果が大きいおすすめの方法です。企画書だけではなく、事業計画書、記事作成前のアイデアまとめ、ToDo管理、悩みの整理など、幅広く思考整理に活用できます。例えば、新規サイトのターゲットについてまとめたい場合、「新しく立ち上げるサイトのターゲットは?」というテーマを書き出し、1分間時間を測り、思い浮かんだことをざっと書き出します。 1分間という制限があると、必死で考えようとするため、ダラダラと考えるよりも短時間で鋭いアイデアを出すことができます。ポイントは1分間という時間と、メモ書きの形式を守ることです。この方法は、「7日間で作る事業計画書」でも紹介されており、書籍のタイトルには「事業計画書」とありますが、起業・新規事業の他、新規サイトの立案や企画書作成にも役立ちます。「ターゲット」「解決すべき重要な課題」「事業プラン」「サービス(企画)の内容と特徴」「市場規模、成長性」などをそれぞれの項目に対して5〜10枚、合計25〜50枚書き出し、その後30分間リサーチ、ドラフトを見なおした後に再度1時間リサーチする、という方法を試してみましたが、3時間ほどでかなりしっかりした企画書の体裁になり、「これを3時間で作ったの?」と驚かれたこともあります。 上司・同僚・ターゲットに見せてブラッシュアップする 企画書の第一案は、枚数にして5〜10枚程度、体裁やデザインも6割程度の仕上げで大丈夫ですので、第三者にフィードバックをもらいましょう。高いデザイン性は必要ありませんが「ある程度見やすいこと、読みやすいこと」を意識することが大切です。紙で書いたものでも、殴り書きでなければ(人に見せても大丈夫であれば)紙の状態で見せてしまって大丈夫かと思います。盛り込む案は、例えば「企画の目的」「ターゲット」「企画の具体的な内容」「実現ステップ」などで、各テーマに1枚くらいのボリュームが目安です。骨組みが決まらない場合は、思い切って上司や同僚の方に相談するのもありだと思います。私も最初わからない時は、骨組みだけ上司に教えてもらい、そこに肉付けをしていきました。また、企画のターゲットとなる人に意見をもらい、独りよがりな企画にしないことも重要です。第三者に話を聞いてみると、アイデアが広がったり、意外な意見が聞けたりします。 企画書は、綺麗に整っていることや、かっこいいことも大切ですが、私はそれよりも中身が大切だと思います。「かっこよく」よりは「綺麗に丁寧に」、また他の人の意見も聞いて分かりやすく説明することが重要です。今回は、アイデアの部分に限って記事を書きましたが、ぜひご意見やご感想、わからないことなどコメントいただけますと幸いです。

iMac 5Kモデルにメモリ増設する際は必ず「低電圧」対応のメモリを!

2015年12月4日
Mac

先月、遂に念願のiMac 5Kモデルを購入しました! 初代の MacBook Pro Retina を持っていますが、動作がモサモサしている上に焼き付きが酷くて… どうもRetinaモデルに偏見を抱いてしまう私ですが、やはり Retina ディスプレイ の魅力には逆らえないのであった! 安い買い物ではないので、一抹の不安を抱きながらも、「27インチiMac Retina 5Kディスプレイモデル」を購入しました。 結論から言うと、大満足です! 焼き付き問題はなく、動作もさくさく!そして、発熱も少なくてとっても静か! メモリ増設に失敗… さて、本題です。 パソコン購入したら決まってやることがある。それはメモリ増設! アップルストアで16GBのメモリにバージョンアップするのになんと72,000円もプラス! 市販のメモリなら2万円弱で入手できるから、まるごと5万円近く安くなるのではないか!?しかもメモリ増設は簡単にできるし、これは自分で増設しない理由はないのですよ。

jQuery のセレクタをキャッシュしてみたら180倍くらい早くなった。 キャッシュすべし!

2015年12月2日
JavaScript

初心者だった頃、誰しも一度くらいはこんな感じのコードを書いたことがあるのではないでしょうか? $('#js-button').on('click', function () { $(this).text('click'); }); $('#js-button').on('mouseenter', function () { $(this).text('mouseenter'); }); このコードのどこが問題かというと、$('#js-button')を2回、$(this)を2回書いてしまったところです。 全く同じ処理を4回も行うのは明らかに非効率ですよね。 だから、以下のように、一旦戻り値のjQueryインスタンスオブジェクトを変数にキャッシュしておいて、あとからその変数を参照するようにしたほうが処理が1回で済むので、パフォーマンスが良いです。 var $button = $('#js-button');

土植えの観葉植物をハイドロカルチャーに植え替えましょう!

2015年11月29日
インテリア

みなさん、「ハイドロカルチャー 」ってご存知でしょうか?ハイドロ(Hydro)は水、カルチャー(culture)は栽培という意味があり、合わせて「水耕栽培」を意味する和製英語です。「水耕栽培」とは言っても形はいろいろ、この場合は、園芸店やインテリア雑貨店なおどでみる煉瓦色のつぶつぶが入った器で観葉植物を育てる「あれ」のことです。 私は自然が大好きですが、家では植物を素直に楽しめません… なんせ、綺麗好きですから、土は苦手分野です… だが、それも過去の話!数年前にハイドロカルチャーの存在を知った私は、今では家の所々に観葉植物で家を彩りまくっています! 今回は園芸店などでよく売られている土植えのものをハイドロカルチャーに植え替える方法を書きたいと思います。思った以上に簡単ですので、一回やってみればすぐにマスターになります! 用意する物 用意してもらう物は以下です。ついた番号が土色の物は無くても良いが、あったほうが尚良です。 1. 器(コップ、プランター)、鉢底ネット ハイドロカルチャーに使う器は底に穴がついていない物がほとんどですが、それだと使える器の種類が減り、雑貨店などでせっかく可愛い器が見つかっても、底に穴がついてるタイプだとハイドロカルチャーに使えないなんて、楽しみも半減…!でも心配ご無用!「セラミスグラニュー」という支持材(土に代わるもの)を使えば底に穴がついていても大丈夫です!今回は「底あり」タイプの器を使用します。 右側にある鉢底ネットは、器の底に敷き根腐れを防止する水はけとして利用しますが、穴がついていないタイプの器を使う場合は不要です。 ちなみに、今回使った器は100円ショップで買いました。むしろこういう小型の器なら、100円ショップのほうがバラエティが豊富で可愛かったりしますので、ぜひ回ってみて下さい。 2.セラミスグラニュー(支持材) 土の代わりに使うものはいくつかあります。代表的なもので言えば以下です。 レカトン(ハイドロボール) ネオコール カラーサンド セラミス・グラニュー 今回使うのは「セラミス・グラニュー」です。ドイツ生まれの室内容器栽培用に開発されたもので、ダントツ保水力に優れているため、器の底に穴がついていても簡単には乾かない優れものです!他のに比べてちょいと割高ですが、今回はこれを使います。 3.観葉植物 ハイドロカルチャーに向いている植物とそうでないものがありますので、植え替えの前に事前調べしておきましょう。

プーティとモップン

2015年7月24日
猫犬日記

昨年の秋に友人の先輩の家で生まれた猫を引き取りました。名前はプーティです。 小さい頃からずっと猫と犬を買いたかったのですが、なかなか叶わず、大人になったら飼いたいと思っていました。猫が性格も温厚で可愛かったので、年末にペットショップにいたワンコをかうことに。この子の名前はモップンです。 猫よりもお世話が大変で、たまに粗相をします。

1design(ワンデザイン)を開業いたしました

2015年7月23日
お知らせ

この度、自宅兼事務所にて「1design(ワンデザイン)」を開業することとなりました。念願の開業が実現した喜びは本当に大きく、皆様の暖かいご指導とご厚誼の賜物と深く感謝しております。 事業内容 Webサイト制作 Webサイト運用 ライティング PR(広報) イラスト作成など 今後はこれまでの経験を活かし、精一杯努力してまいりますので、何卒ご支援とご指導ご鞭撻を賜りますよう、お願い申し上げます。