カテゴリー: コーディング

テキスト周りで使えるCSSの小技いろいろ

モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。
続きを読む

シンメトリー(対称性)を取り入れたデザインの基礎

デザインをする上でシンメトリー(対称性)は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います!
続きを読む

Photoshopをより便利に利用できる無料プラグインいろいろ

デザイナーにはかかせないツール、Adobe Photoshop。Creative Cloudになってどんどん便利になってきましたね!そんなPhotoshopをさらに使いやすくしてくれる無料プラグインが多数配布されています。私はPhotoshop CC ver. 14を使用しており、そのバージョンで使えるプラグインを中心に紹介していきます!
続きを読む

Webサイトのプロトタイプ制作に使える無料オンラインツール

Webサイトを制作する際に大切なものの多くは、制作開始する前の段階にあります。サイトの設計・計画がうまくいっていないサイトは、制作開始後、様々なトラブルに見舞われることでしょう…。ということで今回はモックアップ・プロトタイプと呼ばれる設計画面を作成できるオンラインツールをいくつか紹介します。サイトの大まかな動きをチーム内でシェアしたり、フィードバックしあったりと、便利に使えるものばかりです!
続きを読む

IE8以下を切り捨てれば使える便利なCSSプロパティー&セレクター

Webサイトを制作するにあたって、Internet Explorerのどのバージョンに対応させるかは、制作を始める前に話し合っておいた方がいい問題点のひとつです。私の場合2013年に入ってからはIE6やIE7に対応させる機会は皆無となり、IE8・IE9に対応させるかを議論しているところですが、皆さんはいかがでしょうか?今回はもしIE8を切り捨てる(IE9〜のサポート)なら使える便利なプロパティーやセレクターを紹介します。-ms-filter で対応できるものもありますが、filter の説明は割愛します :P
続きを読む

Webデザインのスキルを磨こう!Webサイト模写のススメ

先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか?」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います!
続きを読む

制作途中にお世話になる、ダミーテキスト・ダミー画像のジェネレーターいろいろ

Webサイトや印刷物の制作中には、とりあえずで入れておく「ダミー」を使用する事が多々あるかと思います。日本ではアタリ・アテなどとも呼ばれますね。それらのダミーテキストやダミー画像を便利に生成してくれるジェネレーターをいくつか紹介します。いろんな種類のジェネレーターやサービスがあるので、うまく利用して時間短縮しちゃいましょう!
続きを読む

より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集

以前「効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単!」という記事で紹介したSass/SCSS。皆さん使ってますか?今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね!
続きを読む

実はあまり知られていない?Adobe公式の無料チュートリアル動画集

Web制作にはかかせない、PhotoshopをはじめとするAdobe社の製品。初心者向けのWebサイト制作についてかかれたサイトや書籍でも必ず目にする名前だと思います。覚える事が多くて何から勉強すればいいかわからない!なんて言う声もよく聞きますが、Adobeの公式サイトで配信されている無料動画で、基本的な使い方はマスターできちゃいますよ!昔からあるサイトですが、意外と存在を知らない方がいらっしゃったので、記事にしてみます。
続きを読む

Adobe Edge AnimateでHTMLファイルにアニメーションを追加する

Adobe社のEdge Animateというツールを聞いたことはありますか?クリエイティブ クラウドのメンバー登録をしている人は、「聞いたことあるけど、何するツール?」という方もいるかと思います(私もそうでした…)。Edge AnimateはアニメーションやインタラクティブなコンテンツをFlash感覚で作成できるツールです。簡単な使い方を、サンプルも交えて紹介します!
続きを読む