フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
スクラッチはもう古い？BeansフレームワークでWordPress開発のフローが変わる
WordPressのテーマって、どんなフローで開発していますか？ 新しいテーマフレームワーク「Beas」なら、便利なコンポーネントを組み合わせて進められるので、テーマ制作が捗りそうです。 いますぐWordPressテーマを自分で作成したいなら、しっかりとコーディングされた信頼できるテーマフレームワークの利用をお勧めします。フレームワークはWordPressに一般的な機能やコンポーネントを提供してくれるので、独自のデザインを作成できるようになります。また、フレームワークを利用するとテーマの作成時間を劇的に短縮できます。 Thierry Mullerが作成した新しいWordPressのテーマフレームワークの1つ、Beansを試してみたので紹介します。Beansについては過去にJames GeorgeがSitePointの『Introducing Beans: A Streamlined Wor
新人デザイナーさんのディレクションから学んだコミュニケーションの心得 - コネヒト開発者ブログ
こんにちは、デザイナーのきよえし(@kiyoe_furuichi)です。 先日、ついにコネヒトデザインチームが結成されまして、チーフデザイナーを担当することになりました！ 手探りながらチーフとしての役割を担っていて一番感じるのは、自分でつくるより何倍もつくってもらうほうが難しいということです。日々多くの発見や学びがあるなあと勉強させていただいてます。 今回は、私が新人デザイナーさんをディレクションするなかで、より良いコミュニケーションをとるために実践している"心得"をいくつかご紹介したいと思います。 制作の流れ まず、デザインを制作する流れとして私たちは以下のように制作を行っています。 タスク依頼 スケジュール調整〜制作 フィードバック リリース・振り返り 私が担っているものは具体的に、タスクの依頼を受けて担当デザイナーを決めることと、スケジュール管理・フィードバックを行いながら完成までフ
テンプレートやテーマ作成に必須な２９
作成：2013/07/8 WordPress > 自分だけのテーマを作りたい、最初から知っておけば、重いプラグインだらけにならずに済んだテンプレートタグやカスタマイズ方法。 WordPressでテーマをいじる時に、「これ、最初から知っておきたかったな」とか「プラグインなんかいらなかったなぁ～」と思えたテンプレートタグやファイルなどをメモ。 これからWordPressでもカスタマイズしてみるか！という人のために、自分の復習もかねてご紹介します。 エンジニア速報は Twitter の@commteで配信しています。 もくじ メタ／SEOを自動化 １．keywordsとdescriptionを自動出力する ２．タイトルが空のとき、HTML要素を出さない処理 ３．canonical／正規URLのみを検索に表示する ４．jQueryや外部 JavaScript の競合を避ける 画像 ５．記事中の最初
確実に速くなる、リニューアルで行ったサイト高速化への手順を全公開 - コムテブログ
TL;DR レンタルサーバでの運用を止め、VPS に移行し、Apache の制約から開放されるため軽量・高速な Nginx に変更し、テーマをカスタマイズし軽めのリニューアルをしました。随分と早く使いやすくなったので、会社 HP とコムテブログに行った高速化への手順を全公開します。 今回のリニューアルに伴い、今回行った高速化処理。ちなみに会社 HPはこちら。 PC は 96 点、アナリティクスとメインの CSS を外せば 100 点が出そうでしたが断念。 Pingdomでは 97。ブログの方は、アドセンスや外部読み込み（こちらで調整できないため）で、どうしても遅くなってますが、これに近づけるようにしていきたいです。 なにはともあれ、サーバのスペックそのものを変えないと駄目だということでさくらの VPS 4G（SSD 4G）をチョイス。コーポレートサイトなら 2G くらいでもよいですが、ブロ
HTML/CSSのコーディング品質についておもうこと | ツクロア - DESIGN LAB
デザインフローシリーズをいっかい休みにして、最近おもったことをかいていきます。 タイトルからして、なんか意識高い系の話になりそうでいやなのですが。。 とはいえ、じぶんが普段思っていることと照らしあわせてなにか考察できればいいなと思います。 HTML/CSSのデザインコーディングについて 通常わたしたちは、デザイン業務をメインでしていますが、HTML/CSSへのコーディングもやっています。 コーディングって意外とデザインの視点が入りづらいところと思われがちなのですが、実際にはそうでもないな、と最近改めて思いました。 そこで、わたしたちが考えているコーディングへの思いを挙げていってみたいと思います。 デザインを受け取って、それをコーディングするだけではうまくいかない ほんとに、いわゆるコーディングの「作業」という業務ですね。 psdとjpgなどを受け取って、画像を書き出して、HTML/CSSで
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
基礎からカスタマイズまで学べる！Bootstrapに関する良エントリー7選｜TechClips[テッククリップス]
簡単にWebサイトが作れるCSSフレームワークが増えていますが、その中でも最も代表的なフレームワークと言えばTwitter社が開発した『Bootstrap』でしょう。モバイルファーストと言われて久しい昨今のデバイス環境とも相性の良いレスポンシブデザインが採用されており、以前のようにパソコン版とスマホ版でWebサイトを作る必要もありません。 Webサイト構築における手段として、確立されつつあるタイミングだからこそ『Bootstrap』を覚えるなら今！ 本記事では、これから使いこなしていきたいというエンジニアやフロントエンジニアの方向けに初心者向けの基礎からカスタマイズまでの流れを学べる良エントリーをピックアップしました。 基礎向けエントリー Webデザイン初心者は見ておきたい！Bootstrapの使い方を徹底解説！ https://blog.codecamp.jp/bootstrap Boo
![基礎からカスタマイズまで学べる！Bootstrapに関する良エントリー7選｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e5885eb22bd26c5e92da043fe0cd3406e68b6493/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F180%2Fimage.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
