ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
重要な情報は左上に――効果的なデザインに必要な4つの原則
エンジニアが知っておくべきWebデザインの4原則、「近接」「整列」「反復」「コントラスト」を分かりやすく解説する。 連載目次 エンジニアが作るシステムやアプリケーションには、デザインが欠かせません。デザインというと、「ビジュアル」「見た目がカッコいい」「おしゃれ」など外見のデザインを思い浮かべがちですが、WebアプリやWebサイトのデザインで大切なのは、そこではありません。 Webのデザインで必要なのは、「ユーザーの目的達成を助ける」ことです。本連載「エンジニアのためのWebデザイン基礎の基礎」は、あなたのWebサイトを訪れた人を引きつけ、ユーザーへと転換（コンバージョン）させるためのデザインの基本を伝授します。 良いデザインの4原則 「エンジニアが知るべき最低限のデザイン基礎」とは何でしょう？ 専用ソフトウェアの使い方？ いいえ、違います。IllustratorやPhotoshopの使い
[翻訳] android best practice - Qiita
githubで★を集めてるandroid best practiceが勉強になるなぁと感心しておりまして、 思い切って翻訳していいかどうか問い合わせてみると快諾いただけたので翻訳してみました。 (Eclipse + ADTの話もでてますがそのまま訳してます。) 原文 : https://github.com/futurice/android-best-practices (Qiitaに投稿するついでに本家のリポジトリにもプルリクしてくれって言われてるので少し待てばそちらでも見れると思います。) この場を借りて、@askaさん、添削ありがとうございましたm_ _m 大変助かりました。 Summary Gradleで推奨されるプロジェクト構成で開発しよう パスワードや注意を要するデータはgradle.propertiesに書こう 自分でHTTP Clientは作らず、VolleyやOkHttp
![[翻訳] android best practice - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/be9148e697f55ca56745d012b0e736d83a596059/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU3JUJGJUJCJUU4JUE4JUIzJTVEJTIwYW5kcm9pZCUyMGJlc3QlMjBwcmFjdGljZSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9Mzk4YmMzMmFjNTE1OGFlZjdhYzg2NGNmNDhiYzE3ODU%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrZ215c2hpbiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZjdkZWIyMWM3OWE5MDE5MTU2N2E2ZWNiMzRhNGIxZjc%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gRE1NLmNvbQ%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D21868507daf67e9d9934a86e13fff954)
iOS 8のPhotoKitの概要＆Xcode 6.1／Storyboard／Auto Layout／iOSシミュレーターの基本的な使い方
連載目次 前回の記事「開発者が知っておきたいiOS 8の新機能＆Xcode 6のインストールと基本的な使い方」では、iOS 8を簡単に紹介し、iOSアプリ開発を始めるための環境構築について説明しました。今回から、iOS 8の新機能を使ったアプリの開発を進めていきます。 前回、本連載で開発していくアプリに盛り込むものとして以下の項目を挙げました。 Xcode 6のセットアップ・使い方・機能を解説 Swiftを使用 iOS 8で追加された新機能を使用 iPhone 4s／5s／6／6 Plusの画面サイズに対応 「iOS 8で追加された新機能」についてですが、本連載では「PhotoKit」の機能を使用したアプリを開発します。「PhotoKit」は、iOS標準の「写真」アプリで使用されているAPIが解放されたもので、「写真」アプリ並みの機能を持ったアプリを開発できます。 iOS 8のPhotoK
「紙っぽいデザイン」の特徴を盗め！イベントポスター事例から学ぶ、紙っぽいデザインの特徴。
quoitworksのムラマツこと、muuuuu.orgの中の人、ムーちゃんです。こんにちは。お盆休みまでもう少しですね！みなさま仕事の進捗はいかがでしょうか。 webのデザインの現場でよくオーダーとしてあるのが、「紙っぽいデザイン」です。 webのデザインはコーディング時のことを考えすぎてしまったり、ユーザビリティや、web独自の視線の流れを意識しすぎてしまうあまりにダイナミックさに欠けたりすることが多いような気がします。 またお客さんとしても生まれてからwebを見ている時間よりも、紙のデザインを見ることが多いので、イメージとして紙（ポスター、雑誌）のような完成図をイメージされることが多いのではないのでしょうか。（特集ページや、LPや、メインビジュアルなどです。検索画面とかは違いますよ！） それで今回はＬＰやアバウトページ、特集ページでよくある「紙っぽく」オーダーをスマートに解決するため
そのデザインには理由がある！デザインの原則をWebデザインにどのように取り入れるのかのチュートリアル
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
便利になったXcode 5新機能7選とAuto Layout入門
便利になったXcode 5新機能7選とAuto Layout入門：ここが変わった！ iOS 7まとめのまとめ（2）（1/3 ページ） 大きく変化したiOS 7に戸惑う多くの開発者／デザイナのために、役立つブログ記事をまとめて紹介していく、まとめ連載。強化されたデバッグ機能、Git連携機能、テストフレームワーク「XCTest」とテスト管理機能、OS X Serverと連携するCI（継続的インテグレーション）機能「Bots」などに関するブログ記事をまとめて紹介します。 2013年9月18日、iOS 7の正式版リリースが始まりました。iOS 7は旧来のiOS 6に比べるとUI含め変わった部分が大きく、戸惑っている開発者／デザイナも多いと思います。 そこで本企画ではアプリ開発者／デザイナ向けに、iOS 7リリースに合わせて多数のブログ記事を執筆したクラスメソッドの協力の下、数回に分けてiOS 7に
爆速ではてなブログリーダー・アプリを作ってソースコード公開してみた！ - sakaharaのブログ
はてなブログには人気エントリーを返すRSSフィードがあるので人気エントリーを表示するアプリを勉強がてらに作ってみました。 Core Data に取得した人気エントリーを保存してるのでオフラインでもみれます。 (ただこのアプリ、表示できるのは人気エントリーの一覧だけです・・・) http://blog.hatena.ne.jp/-/hotentry/rss アプリのスクリーンショットです。 ・ブログ一覧画面(縦) ・ブログ詳細画面(縦) ・ブログ一覧画面(横) ・ブログ詳細画面(横) Xcode5から使いやすくなったAuto LayoutやXCTestなどあまりキャッチアップできていなかった部分の勉強や単体テストをちゃんと書くという目的があったのですが、作りっぱなしでは面白くないので公開します！ https://github.com/asakahara/ASHatenaBlogReader
waterfall.js
div要素などで配置した高さの異なるパネルをレンガ状に一定の隙間で配置するjQuery兼Zeptoのプラグインを紹介します。 左のサイドバーは適用なし、右だけレンガ状にできます。 waterfall waterfall -GitHub そういえば最近、デモにzeptoの方を使ってるプラグインが増えてきましたね。 waterfallのデモ waterfallの使い方 waterfallのデモ スクリプトのページ自体がデモになっています。 まずは、デスクトップサイズでの表示。 デモページ、幅780pxで表示 カラムの数はカラムの幅の最小値を設定することで、自動で表示されます。 ページ内の適用範囲も指定できるので、左のサイドバーはそのままの表示です。 waterfallの使い方 使い方は簡単です。 HTMLがあれば、数行加えるだけで完了です。 Step 1: 外部ファイル waterfallはj
黄金比・黄金螺旋・黄金三角形などをページのレイアウトや写真の構図にあてがうPhotoshopの機能拡張
対角線 Divine Proportions Toolkitのインストールと使い方 Toolkitの対応バージョンはPhotoshop CS5, 6です。 インストール 下記ページのDownloadから「divine_proportions_toolkit_1_0_4.zip」をダウンロードし、解凍します。 Divine Proportions Toolkit 解凍したフォルダ内にCS5, CS6のフォルダがあるので、利用する環境に合わせて選択してください。 フォルダ内の「Divine Proportions Toolkit.zxp」をダブルクリックすると、Adobe Extension Managerが開きます。 指示にしたがって、インストールします。 インストールが完了したら、Photoshopを再起動します。 使い方 使い方は簡単です。 メニューバーの[ウインドウ]-[エクステンショ
[CSS]divもfloatもclearもhackも使用しないで組む3カラムレイアウト | コリス
TJK Designのエントリーから、ヘッダ・フッタ・3カラムのレイアウトをdiv, float, clear, CSS hackを使用しないで実装するスタイルシートの紹介です。 A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK! 対応ブラウザは、WidnowsがIE5.01, 5.5, 6, 7, Fx0.8, 1.5, 2.0, Op9.0, 9.24、MacがIE5.2, Safari2.0, 3.0, Fx2.0、LinuxがKonqueror, Mozilla、そしてiPhoneとなっています。 仕組みは、簡単に説明するとリストを使用したもので、実装方法は８つのステップで紹介されています。
[CSS]わずか12個のclass名で多彩なグリッドを組み立てるCSSのフレームワーク -StackLayout
IE6をはじめ、iPhone, iPadにも対応した、可変レイアウトも固定レイアウトにも利用できる実用的で多彩なグリッドを組み立てるCSSのフレームワークを紹介します。 StackLayout デモページ：Basic Mockup [ad#ad-2] StackLayoutの主な特徴 StackLayoutの対応ブラウザ・デバイス StackLayoutで使用する12個のclass名 StackLayoutのデモ StackLayoutの使い方 StackLayoutの主な特徴 わずか12個のclass名で、コンポーネントを管理 class名は、簡単にセマンティックなものに変更可能 ネストの制限は無し floatのクリア無しで、エレメントを横列に簡単に並べることが可能 デフォルトは可変レイアウト用で、固定レイアウトにも対応 各カラムの溝の設定は簡単で、px, %の両方に対応 StackLa
ページの幅960pxを基準にして、設計するグリッドデザイン | コリス
960 Grid Systemは、ページの幅960pxを基準にして、設計するグリッドデザインを紹介しているサイトです。 960 Grid System デモページ 960pxを基準にする理由としては、下記の2つが挙げられています。 最近のモニターは1024x768の解像度をサポートしており、960pxを表示するには十分である。 960という数字は、2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480と多くの数字で区切ることができ、フレキシブルにグリッドの設計を行える。 デモページでは、左右に10pxのマージンを持ち、カラム間のマージンを20pxにし、60pxをベースに12カラムと、40pxをベースに16カラムの2種類のレイアウトを見ることが
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MixItUp | KunkaLabs
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
センスがなくてもチラシを組み立てられる電卓式レイアウト法 | 企業ホームページ運営の心得
