WordPress で Webサイトを構築する時に、設計の段階で知っておきたい投稿のタイプ（ポストタイプ）について、その特徴などをまとめてみました。とても長い記事になってしまい、うまくまとめられなかったかもしれません ... WordPress ... 奥が深いんだもん ... Webサイトを作るぞーってなってから、アップロードして公開するまでには、本当にたくさんの色んな工程がありますよね。まず発信したい情報があって、誰に見てもらいたいとか考えて、設計してデザインして、コーディングして … 。 Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPress で Webサイトを作る時に、設計の段階で知っておくといいかなーと思う、ポストタイプ（’post_t
ネタをため込むばかりで一向にアウトプットにつながらない、という人におすすめなのが「ネタ帳ガーデニング」です。 水をやり肥料を与え、間引いたり、剪定（せんてい）したり、植え替えたり、といった手を掛けて初めて植物は大きく育ちます。 ブログのネタもまた同様で、あちこちから集めてきたネタには、まずタイトルを与えること。次に似たようなネタがすでにあれば重複部分を取り除いたり統合するなどして、良いところを残すようにします。 さらに、すぐにでも活用の目途がたつ（＝有用物になる）ようなら、他のネタとは分けて、ピックアップに備えます。 これが「ネタ帳ガーデニング」です。 具体的な手順は以下の通りです。 本の引用やWebページのスクラップを1つにつき１ノートずつ割り当ててEvernoteに取り込む 1のノートのタイトルの先頭に「なぜそれを取り込んだのか？」「次に何をするのか？」などの手がかりを記す ブログに書
いままで勉強会に顔を出し、すばらしいエンジニアと数多く会うことができた。そして、スーパーエンジニアと共に仕事をすることもできたし、できている。そんなスーパーエンジニア達が持っていた習慣を僕の経験と視点からまとめてみる。 自分が使う道具を厳選して選んで手入れをしている エンジニアでいえばエディタやツールなど。皆が使っているIDEやエディタを何も考えずに使い始めたりしない。 厳選したエディタやツールを使って、手になじませるのである。手になじませるというのは、2つの意味がある。 1つは操作性に慣れること。呼吸をするように自然に、キーボードの上を駆け回る心地よいリズムを奏でるエディタを選ぶ。 2つめは、自分に合わせて拡張しているということ。プラグインのON/OFFだけではなく、オリジナルのショートカットを設定し、適切なハイライト、シンタックスのチェック、コーディングルールのチェック、様々な言語への
食事を抜く、おざなりにする 朝食、昼食、夕食を熱中しすぎて抜いてしまう。ブドウ糖は蓄えておくことができません。定期的に栄養を取らないと脳がエネルギー不足となって、生産性の低下を招きます。凡ミスが多くなってくる。 きりの良いところで必ず食事をとること。食事の間隔があきすぎることがないように注意する。 生産性のないことに2〜3時間熱くなる 落ちついてコードを読み、設定を直せばすぐに解決するバグを、憶測で○○が悪いのかな？とあれもこれもと手を出すうちに2，3時間を費やしてしまい疲弊してしまう。 感情を抑え、物事を論理的に考える落ち着きを取り戻そう。 何を完了したら仕事が終わりなのかを理解していない コードを書けば仕事は終わりですか？QAやテストやドキュメントなどはいりませんか？誰に承認をえるのですか？これら、仕事として必要なことに注意を向けずに仕事を終わったと思ってしまう。本当に足りないことはあ
新人たちを指導する機会があり、飲み会の時に突然質問された。どうやったら仕事が出来る人になれますか。そんな質問が出てくるとは思わず、酒の勢いも手伝って、自分を棚に上げつつ、つらつらとでも熱く語ってしまった。 なので、ちょっと考えてみた。ここ数年、色々な人を目標に、仕事をする際に気をつけてきたことをつらつらと書きなぐってみた。 過ちを認めてすぐに訂正する。（リカバリを優先。あと、過ちを認められる人は意外にカッコイイ。） 分からないことを分からないと言う。（自分が恥ずかしい思いをするだけで、重要な情報を得られるなら、逆にお買い得。） 迷わず自信を持って話す。（迷いがメンバに伝搬したら、メンバは不安を抱えながら仕事をすることに。不安を感じるのは自分だけで十分。） 決断する勇気と決断したことに責任を持つ。（結論を出すのを先延ばしにすると、それだけで仕事の進捗が遅れる。たとえ間違った結論を出して問題を
☆ご注意☆ この記事は 2011年6月5日 に書いたものです。情報が古い可能性がありますのでご注意ください。 私も少しですがこの「1pxのこだわり」を日頃のデザインで使えるようになってきたので、制作方法とともにちょっとまとめてみました。 引き出しのひとつとして、デザイン勉強中の方、参考にしてもらえるとうれしいです＾＾ デザイン上級者の方々にとっては当然のことだと思うのですが、 最近つくづく思うのが、「1pxで質感が全然変わるよなぁ～」ってとても感じます。 たった1pxでピリッとしまったり、見やすくなったり、しゅっとなったり、、、と、1pxをないがしろにしちゃいけないんですねー… 今回は、私がデザイン制作時よく参考にしている、 デザイン参考集、bookma!さんの中から、色んなサイトを調べてみました。 目次 仕切り線の1px 文字をキリッと見せるための1px 動きのある1px 1pxの枠 仕
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
☆ご注意☆ この記事は 2011年5月29日 に書いたものです。情報が古い可能性がありますのでご注意ください。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 毛の生えた私からツルツルの私へのダメだし Webデザイナーなりたてのころ、デザインのチェックをしてもらったとき、 「んーーーなんかこのへん素人っぽいね」と言われた事があります。 素人っぽい。。。？？？(゜д゜) そのときは何だろう、どんなのが素人っぽいんだろうとわかりませんでした。 就職はできたものの、技術は完全ど素人なので。 今も素人にちょびっっっとだけ毛が生えた程度ですが、 少しだけわかるようになりました。 「素人っぽい」の意味が。 毎日、たっくさんのWebサイトを見ますが、プロのデザイナーが作ったと思われる、構成もデザインもしっかりしたサイトもあれば、お店の人が一生懸命手作りしてそうなサイ
Ajaxで他のページを取ってきて、コンテンツをガリガリ書き換えてしまうようなサイトを先日案件で作ったのですが、従来の方法ではGoogle Analyticsで遷移先のページビューを取得できないことに気づいて、実験を行ってみました。 実験のために作成したデモがこちらです。 Google Analytics Demo 何をやっているかを解説していきます。 以下のような部分がAjaxでページを書き換える処理の例です。 今回はjQuery 1.7.1を使うことを前提にしてコードを書いています。"ul a"セレクタ（いかにもやっつけですが。。）で選択されたa要素をクリックすると、href属性値で指定されたURLをAjaxリクエストし、その内容で <div id="contents"/> の中身を書き換えちゃうよ、というものです。 $(function() { $(document).on('cli
みなさんも仕事の効率化、時間短縮のためにしていることってありますよね？ 私ももちろんいろんな工夫をしているのですが、もっと効率よく仕事がしたいって思っています。 とりあえず、今、時間短縮の為に私がしていることをまとめてみました。 私は毎日 Webサイトを作るために、Photoshop を使ったり、コーディングしたり、調べものをしたり … とにかくいろんな作業をしています。そんな中、もっと時間短縮できないかなー、これって時間の無駄だなーと思うこともたくさんあります。1日は 24時間しかないし、決められた 24時間の中で自分の時間を作るためには、仕事の時間を圧縮するしかありません … X( できるだけ無駄をなくして、早く仕事が終われるように、時間短縮術をマスターしたいと思ってます。コーディングを早くできるようにしたりするものはもちろん、欲しい情報に素早くアクセスできるような工夫など、今私が時間
3. 自己紹介 職業：デザイナー 物心ついたときには絵を描くのが好きだった そのままの勢いで某美大某デザイン科に進学 社会に出たらデザインの話が通じなさすぎて悶絶 そんな社会に対して、デザインの効果をりろんてきに説明して説得しようとしている marippe_
結構Firefoxが好きなので、ちょこちょこ改造していたんですが、管理するPCごとに新しいこと試したり前やってたことをやめたりしてるうちに何が何だかわからなくなってきてしまったので、そろそろまとめようかなー？ってことでまとめてみました。 ちなみに、ここに書いてある改造は完全に自宅マシン用です。 会社のマシンでここまでやると・・・ちょっと動作とかアドオンの不都合とか色々検証してないことも多いので、出来るだけご自身の責任でお願いいたします。 とりあえず手始めに入れるアドオン SQLiteOptimizerアドオンを入れる Firefoxの重たくなる一番の原因となる、SQLiteの計量最適化を図ってくれるアドオン。 Faster Fox Liteアドオンを入れる 設定は「ターボチャージャー」に。 かつ、アドバンス設定で「Disable IPv6 DNS lookup」にチェック。 MemoryF
~/Library/Application Support/Firefox/Profiles/ （~/Library/Application Support/Mozilla/FirefoxProfiles/） 2）ツールバーの表示を保存する 画面キャプチャでスクリーンショットを取っておき 復元する際の参考に画像として保存しておきます。 メニューの「ツール」→「アドオン」→「テーマ」をクリック 設定してあるテーマの名前で検索→テーマのWebサイトを デスクトップのショートカットに保存しておきます。 3）必要なアドオンを選定する メニューの「ツール」→「アドオン」をクリック アドオン一覧より、実際に使用しているものだけをPickUpしてメモしておく。 その際、設定も可能であればエクスポートする、必要なものをメモしておく。 4）ブックマークをエクスポートする メニューの「ブックマーク」→「ブック
デザイン力をつけるためには、たくさんの素敵なWEBデザインを見て引き出しを広げることも大事だと思っています。そのため、いいなと思うWEBサイトを見つけてはスクリーンショットを撮ってEvernoteに保存してたのですが、意外と手間も時間もかかる…。 もっと楽にできたらいいのにと @globalwe6 さんと探っていて、Tumblrを使うと非常に手軽にスクリーンショットを保存できることに気が付きました。 今回は、Tumblrを使って簡単にWebデザインギャラリーを作成する方法をご紹介します。 かなりオススメです！ Tumblrアカウントを作成する まずはTumblrのアカウントを作成します！私はだいぶ前にアカウント登録してたものの、活用方法が思いつかず使っていなかったので、そのIDを使用しました。アカウントを持っていない方はtumblrのサイト右上の登録するボタンから作成します。Tumblr
The document discusses various techniques for developing mobile web applications, including: 1. Using viewport meta tags to control layout on different screen sizes. 2. Storing cached content in Web Storage instead of cookies for better performance on mobile. 3. Loading images lazily via Ajax to improve perceived performance. 4. Detecting device orientation changes and resizing content appropriate
2011年、激動するソーシャルメディアには、どんなドラマが待っているのだろうか？ 米国ブログメディアのMashableがまとめた予言集を紹介して、その息吹を感じ取りたい。 ・ 95+ Predictions for the Web in 2011 この中に含まれる18分野の予言のうち、In the looop読者の皆様が興味をもつであろう10分野に絞り、それぞれの見出しを邦訳した。短いコピーの羅列だが、意外に味わい深く、明日が浮かび上がってくるようだ。意訳しているものも多いので、さらに興味があれば、ぜひ該当記事を直接読まれることをおすすめします。 1. Social Networks in 2011 by Ben Parr ・Googleのソーシャルネットワークは、手ひどく失敗するだろう ・中途半端な規模になってしまったMySpaceは、売りに出されるだろう ・Beboのオーナーは、また変
明けましておめでとうございます！ 近年、個人でWebサービスを開発するのが流行っていますね。「今年こそは俺もWebサービスを作ってモテモテになるぜ！」と思っている人も多いのではないでしょうか。 そんな人のために、Webサービスを開発・運営するにあたっての心構えやノウハウ、体験談などの書かれたエントリーを集めてみました。 ▼誠 Biz.ID：田口元の「ひとりで作るネットサービス」探訪 個人でWebサービスを開発している人たちのインタビュー集。ヒットしたサービスを手がけた個人開発者達のバックグランドや考え方を垣間見ることができ、モチベーションアップにもなります。恥ずかしながら、私のインタビューも載っています。 ▼Web2.0ナビ: 個人サービスを作るコツ 個人がWebサービスを作るための、実践的な8つのコツが書かれています。 ▼個人でネットサービスを運営するための5つのコツ（momose版）:
CSSのプロパティ一つに対して、値を二つ（開始と終了）変更し、さまざまなCSS3アニメーションの基本的な実装例を楽しめるデモサイトを紹介します。 LeaVerou / animatable デモページ [ad#ad-2] デモページを楽しむには、Chrome, Safariで閲覧ください。 Firefoxでは一部動作しません。 アニメーションのスタートは、2つあります。 マウスオーバーで一つ一つのアニメーションがスタート アニメーションが全部同時にスタート 全部同時にアニメーションをスタートさせるには、「Animate all」ボタンをクリックします。 全部同時にアニメーションすると、何がなにやら分からない状態にw [ad#ad-2] 下記に数多くあるデモから、いくつか紹介します。 デモの下にある「background-color」などは、そのプロパティの値を変更してアニメーションしている
フォントのサイズの単位に何を使ってますか？ px？ em？ それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定 はじめに フォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。 それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定 これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定 ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く