完璧な写真を撮影する方程式はありません。 しかし、これから紹介する20個のガイドラインを利用すれば、つまらない写真の構図を魅力的に改善することができるでしょう。 このチュートリアルでは、写真の仕上がりがグッと良くなる、20個の構図テクニックを参考サンプル例と一緒に見ていきましょう。もっとも基本的なガイドラインにはじまり、より複雑で高度なテクニックまでまとめています。 コンテンツ目次 0. 構図ってなんだろう。 1. 三分割法 2. 中央揃えと左右対称 3. 前景シーンと奥行き感 4. 枠のなかの枠 5. リーディング・ライン 6. 対角線と三角形 7. パターンと質感 8. 奇数の法則 9. フレームを覆いつくそう。 10. 余白スペースを利用しよう。 11. シンプルさとミニマリズム 12. 被写体のみ切り抜こう。 13. 視点を変えてみよう。 14. 配色の組み合わせを考えよう。 15
デザイナーにとってテクスチャやパターン素材は、デザイン制作で必要不可欠な素材のひとつです。控えめなオーバーレイテクスチャから、美しい背景まで細かいディテールをデザインに加えることで、魅力的な見た目を実現できます。 今回は、人気素材を中心に合計45種類の素材を揃えた、過去最大のテクスチャ&パターン素材集 The Gigantic Textures and Patterns Bundle をご紹介します。 この素材集は、すべての素材が商用ライセンス付きで、クライアント向け案件や商品デザインなどにも活用することができます。2週間限定で通常$3000(およそ30万円!)の99%オフ、$29(およそ3,000円)で販売中です。 購入ページへ進む 購入ページへ進む 150 Custom Curated Catalogue 水彩ペイントや金箔ラメ、パステルなど人気のテクスチャ360枚以上を揃えた素材で、
ウェブサイトの制作中、目を惹くデザインのアクセントに悩むことはありませんか。最近、インタラクティブなグラデーションアニメのためのJSライブラリGranim.jsが公開され、注目を集めています。 今回は、このライブラリを使い、Bootstrapを使うような感覚で、クラス名をつけると背景にグラデーションアニメが実装できるようにしました。 デザインスパイスのひとつに、一度試してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方はシンプルで、グラデーション用のクラス名をつけると、その要素の背景がグラデーションになります。 ロゴと短文を使ったカード型レイアウト。 See the Pen qaxExO by ya90net (@ya90net) on CodePen.
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
Bootstrapなどのフレームワークの登場によって、ウェブサイト制作は以前よりも手軽に、そして身近になってきています。特にデザイントレンドをうまく採用したHTMLテンプレートを利用することで、モバイル端末へのレスポンシブ対応はもちろん、簡単にサイトデザインを作成できるようになっています。 今回は、無料ダウンロードできる新作HTML5/CSS3テンプレート素材をまとめてご紹介します。どの素材も高品質なだけでなく、テキストエディタで編集しやすい仕様となっており、サイト制作が捗るアイテムが揃っています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 サイト設計の手間を大幅に削減する、実用HTMLテンプレート素材まとめ Material Design for Bootstrap Google 公式のデザインガイド「マテリアル・デザイン」をコンセプトに、人気フレームワーク B
WordPressでアップロードした画像をリサイズして新たに画像を自動生成する機能を停止する方法で、Ver 4.4から追加されている「medium_large_size_w」の対応方法についても併せて紹介します。 デフォルトではアップロードした画像のサイズにもよりますが、アップロードした画像以外にサムネイル・中サイズ・大サイズのイメージをそれぞれ自動生成してくれます。 テーマによってはこれらを上手く使い分けるということもありますが、確実に使わないのであれば不要ですし、サーバーを圧迫したり引っ越しする際に時間がかかる要因となってしまったりするので、この機能は必要ないという場合は以下の方法で停止することができます。 設定を変更する メディアに関する設定は管理画面の「設定 > メディア設定」から行います。 デフォルトだと幅や高さの項目にそれぞれ値が指定されていると思いますが、それらを上のキャプチ
フロントエンド・デザイナーやデベロッパーは、スタイリングや配置、またデザイン性の良いサイトを作成するためにCSS(Cascading Style Sheets、カスケーディング・スタイル・シート)を利用します。しばしばページに変化(英: Transition)やアニメーション(英: Animation)を加えるためにCSSを利用しますが、まだまだ開発する余地がありそうです。 アニメーションは、訪問ユーザーにとってデザインをよリ理解しやすく、ためになる情報を伝える強力なツールとなるでしょう。ウェブサイト制作で活用でき、よりパワフルな使い方ができる基本原則を今回はご紹介します。 ディズニー社の現場で長年培われた、アニメーションの基本原則12個(英: 12 Principles of Animation)は、「生命を吹き込むイリュージョン: ディズニーアニメーション(英: The Illusio
ごく普通のHTMLでも、BootstrapでつくったHTMLでも、あっという間にWordPressのテーマファイルに変換するオンラインサービスを紹介します。 HTML To WordPress HTML To WordPressは非常にシンプルな操作で、HTMLのフォルダをアップロードするだけで、簡単にWordPressのテーマに変換されます。変換したテーマはプレビューは無料で、テーマのダウンロードは1HTMLごとに$9、制作の手間を考えるとかなり魅力的な価格設定だと思います。 という訳で、静的なHTMLを用意してさっそく試してみました。 用意したHTMLは、こちら。 Land.io -GitHub ダウンロードページ 個人・商用利用、無料。 Bootstrap 4をベースにしたテンプレートで、新しいカードコンポーネントを使い、繊細なアニメーションでコンテンツを魅力的に見せています。 La
上の記事は、Wordpressのページキャッシュプラグインは、1ページにつき1つのキャッシュしか生成されないと思っていて書きました。というか、こういったプラグインはそういうもんだと思い込んでいました。 なので、パソコンとモバイルで表示が変わるようなテーマだと、ページキャッシュプラグインを使うと、表示がおかしくなると考えていました。 しかし、W3 Total Cacheというキャッシュプラグインを利用すれば、パソコンでもモバイルでも両方のキャッシュを作成し綺麗に表示することができることを知りました。(よくできる?学生さんにコメントで教えていただきました。) それで昨日、設定してみたら、設定方法が簡単で驚きました。その上、パソコンでもスマホでも、しっかりと意図通りのデザインが表示される、素晴らしい機能だったので、その設定方法について紹介したいと思います。 今回の設定を利用すれば、大抵のテーマで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く