これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
コレやりたい！Photoshop写真加工が上手くなる時短ワザ10選
写真加工や修正は、Photoshopのデザイン制作において重要なテクニック。 しかし、用途に応じてツールを使い分け、エフェクトを効果的に適用しているというひとは、どれだけいるでしょう。 せっかく撮影した写真がぼやけてしまったり、光量が足りないなんてことも。 また、しみなどお肌のトラブルを隠したかったり、朝日や夕日をドラマチックに仕上げたかったりと、特別なテクニックが必要なものばかり。 今回は、Photoshopですぐにできる写真加工テクニックを、各サンプルと一緒にまとめてご紹介します。 これらの方法を実践することで、どんなデザインでも手軽に、そしてスピーディーに写真加工できるようになります。 コンテンツ目次 コントラストで写真の仕上がりをアップ ぼやけた写真をくっきりシャープに 朝日や夕日をダイナミックに仕上げる にきびやしみなどお肌のトラブルを修正する 着ている洋服の色を変更する トレン
シンプルなのに効果的！美しい背景画像を作成するテクニックのまとめ
背景はデザインにおいて、非常に重要な要素です。 ビジュアルの土台となり、他の要素がどのように見えるか決定する要因となります。 要素を引き立たせる美しい背景画像を作成するシンプルなテクニックを5つ紹介します。 5 Simple Tools to Create Beautiful Backgrounds 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 不透明度を調整したカラーオーバーレイを使用する ぼやけた背景と対になるアイコンを使用する コピースペースと共にイメージを使用する モノクロの背景にネオンカラーのテキストを使用する 形をテキストホルダーとして使用する 不透明度を調整したカラーオーバーレイを使用する 背景となる写真画像にカラーオーバーレイを加えることで、デザインの印象を引き起こします。デザインする時のポイントは、まずは画像は彩度
人を動かすマーケティングテクニック！知っておきたい6つの心理効果
こんばんは！ マーケティングコンサルタントの落合正和です。 マーケティングスキルはビジネスを大きく左右する重要なスキルであるにも関わらず、学校や会社ではほとんど教えてもらえません。一見難しいように感じるこのスキル。実はいくつかの心理テクニックを使えば、あなたもカンタンに操ることができます。あなたも今日から活用してみませんか？ 返報性の原理人は他人から何らかの施しを受けた場合に、お返しをしなければならないという感情を抱きます。 この心理を「返報性の原理」と言います。 この返報性の原理があるために、親切や贈り物、招待などを受けると、お返しをしないことに罪悪感を感じてしまう人も多いです。 スーパーの試食、デパートの化粧品売り場でのメイクなどは、意図的にこのテクニックを使っています。 このように、返報性の原理を利用し、小さな貸しで大きな見返りを得るというテクニックは、マーケティング手法としてよく使
写真をほんの少し上手く見せる50のテクニック - あたし、めりーさん。今、あなたが心の中にいるわ。
編集編 1. 使えるものはOffice Picture Managerでも使え Lightroom, Photoscapeその他いろいろありますが、使えるものはなんでも使いましょう。撮って出しなんて中級者になってから考えればよいのです。 クソ写真も編集次第でどうとでもなります。 wonodas.hatenadiary.com 構図編 2. 自信がないなら3分割交点構図 三分割交点構図は七難を隠します。いたるところでおすすめされているのはそんなわけです。 デジカメならたいていガイドが付いているのでそれに従ってとればよいだけ！簡単です。 (Nikon D90/Nikkor 50mm f1.4) 3. 日の丸構図は真上または真正面から。水平と垂直をきっちりとること 実は難しい日の丸構図。撮るなら真上、真下。水平と垂直は必ず出す。なお画像内に直線が含まれる場合、収差の少ないレンズを選ぶ必要がありま
文章の作り方 - 伝わるデザイン 研究発表のユニバーサルデザイン
研究者や研究に関わる大学生や大学院生は、一年を通じて研究室ゼミや学会などで研究成果の発表を行なわなければなりません。また、近年、科学者でない人たちに対する一般向けのプレゼンや講演（アウトリーチ活動）の機会も増えてきています。他にも、研究論文や報告書を書いたり、研究費調達のために予算申請書やプロジェクトの提案書を作成したりすることも、研究者にとって欠かせない仕事です。これらはいずれも情報を他者（研究仲間や審査員、一般市民）へ伝えようとする行為であり、正確かつ効果的な情報の発信が望まれます。しかし、自己流で資料を作成して、闇雲に情報を発信していても、スムーズに情報は伝わりません。ときには誤った情報が伝わってしまい、研究の価値を正当に評価してもらえないことさえ起こりえるのです。 情報を正確にかつスムーズに他者に伝えるためには、情報をデザインすること、つまり文章を読みやすく整えたり、図表を見やすく
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
Above the foldのコンテンツを1秒以内に高速表示させるための3つのテクニック
[対象: 上級] モバイルサイトにおいては、モバイルユーザーのユーザーエクスペリエンスを高めるためにスクロールせずに最初に見える、いわゆるAbove the foldのコンテンツを1秒未満で表示することをGoogleは推奨しています。 そこでこの記事では、feedthebotが解説しているAbove the foldのコンテンツ表示のスピードアップに役立つ3つのテクニックを紹介します。 1. Above the foldのHTMLをそれ以外と分割する サイドバーを含むAbove the foldで表示されるのコンテンツのHTMLコードを先に記述します。 ここでのポイントは、Above the foldのエリアとそれより下のエリア (Below the fold) の2つに分けるという点です。 メインコンテンツだけではなくAbove the foldで表示する部分のサイドバーのコードも残りと
Photoshoopでの作業時間を短縮するのに役立つ10のテクニック
10 Photoshop Quick Tips to Improve Your Workflow 下記は各ポイントを意訳したものです。 1. レイヤースタイル パネルでの操作 2. 空の選択範囲の変形 3. 斜めの画像を水平にする 4. 画像に磨りガラスのようなパネルを設置 5. キレイな切り抜きを素早く 6. 瞳のカラーを変更 7. 画質に影響を与えないで照明のエフェクト 8. 作業確認用の新規ウインドウ 9. 画像からカラースウォッチを作成 10. レイヤースタイルをレイヤーの一部に適用 1. レイヤースタイル パネルでの操作 レイヤーパレットの下の「fx」ボタンをクリックすると開くレイヤースタイル パネルで、レイヤースタイルのアクティブ時に直接微調整ができます。 操作可能なスタイルは、4つです。 ドロップシャドウ グラデーションオーバーレイ サテン パターンオーバーレイ 4つのスタイ
Photoshopで写真を手書きの鉛筆画風に加工する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。絵を描くのが趣味です。 最近は絵を書く時間が全く持てなくて困っています……。 どうにか早く描けないものかと悩んだ末、表題の通り、「写真から絵を作ってしまおう」という結論に至ったわけです。 折角だし、絵が描けなくて困っている方たちにも役に立つテクニックなのではないかということで、やり方をさくっと説明してみたいと思います。 【こちらもおすすめ】 ☞ Photoshopで初めて写真加工をするときに知っておくべき基本手順まとめ 素材写真を用意する 鉛筆画らしく見せるためには、まず写真を切り抜いておきましょう。 アウトラインを抽出 次に、以下のステップを踏んで、アウトラインの抽出を行います。 cmd + Jでレイヤーを複製します。 cmd + Iで反転させます。 Shift + Alt + D で 描画モードを「覆い焼き」にします。 「色相 ・ 彩度」の調整レイヤーを
初心者でも作業時間が半分に!? Illustratorの効率化テクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
パスの練習にはiPod風壁紙自作するのが一番だよ。こんにちは、もりたです。 先日、井上のきあさんの『Illustrator ABC』（エムディエヌコーポレーション）を買ったんですが、すごいなイラレ、いろいろできるのな！って感動したので、今回は覚えた機能を使ってなにか作ってみようと思います。 井上のきあさんの『Illustrator ABC』はコチラからご購入できます： http://www.amazon.co.jp/dp/4844363506 しかし自分の記事見直すとホント何にも知らずに使ってたんだな・・・。 ちょっと恥ずかしいので責めないでください。ほんと恥ずかしいんで！ 紹介したい機能 今回は、［グローバルカラー］［ライブペイントツール］［アピアランス］機能を使いこなしてみたいと思います。 アピアランスで線路記号が作れるということなので、地図を作りながら説明します。 作業環境は、Mac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック![情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/989a806d2ccf27431e67d306fd1bab102cd42f70/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020082101.png)
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP