東村アキコ先生の「偽装不倫」という漫画を読んだ。 万が一知らない方のために、東村アキコ先生は「東京タラレバ娘」「海月姫」などヒット作連発の売れっ子漫画家で、デビューが1999年ということなので、商業誌デビュー19年！すごい、好きです。 そんな東村先生の「偽装不倫」を読んで、あまりにもショックを受けました。レイアウトが、普通の、漫画じゃない！！！！ レイアウトは「割る」ものだった時代 漫画のレイアウトを「コマ割り」というように、これまでのレイアウトは、 ・ページ送りという概念と総ページ数 ・「1：√2」のサイズの見開き2ページの紙面 これらを割って作られるもの。これは漫画だけでなく、本や紙のデザイン全般に言えることで、紙面のレイアウトの基本となる「大小のメリハリ」も「文字のジャンプ率」も「断ち切りの表現」も、ページと紙を基本として、優先順位を持って紙面を「割る」ものでした。 Kindleのよ

OR メールアドレスで登録上記ボタンのクリックにより、利用規約 及び 個人情報の取り扱い に関する要項に同意したものとします。 ※X(旧Twitter)での登録時に不具合が発生する場合があります。その際は他の登録方法をご利用ください。 アカウントをお持ちの方はこちらからログイン

こんにちはharuです。 最近はお祭りが多いのか浴衣を着ている方を多く見かけます。 目の保養になって日本人でよかったな、と思う今日この頃です。 今回は下の可愛いわんこを時短なる早で切り抜きたいと思います。 1.切り抜きやすいようレベル補正でかける このままだとかなり明度が明るく、切り抜きにくいので「色調補正」→「レベル補正」で調整します。 今回は白で飛んでしまっているので暗めに補正をかけてラインをはっきりさせています。 2.クイック選択ツールでシルエットをとります。 この時丁寧にとってあげると後々楽です。 また足と地面の境目などはレベル補正で境目が見辛くなっているので レベル補正のレイヤーを非表示にしてあげるとやりやすいです。 3.『境界線を調整』で調整する 『境界線を調整』をクリックし、表示モードを『黒地』（今回白いわんこのため）、ブラシでふちをなぞるように選択していきます。 すると毛が

ランディングページ（ＬＰ）の作り方を、超重要ポイント７つに絞って説明します。対象読者は、これからＬＰを作成する方です。インハウスのご担当者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳しく解説したからです。１回読んで分からなければ、繰り返し読んでください。それだけ価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく７つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー（１行）とサブコピー（２行）、写真の３つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか？　お客さんの気持ちに寄り添いながら、言葉で解きほ

Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する

Hej！ 2016年新卒デザイナーのririahです！ 出身はスウェーデンです。すごく遠い国から日本に来ました。スウェーデン人が日本語で記事を書くことは少し不思議なことですが、私もドワンゴのデザイナーになったので、日本語を頑張ってクリエイターズブログの記事を書いていきたいと思います！ 本日ピックアップした題材は「北欧デザイン」について。スウェーデン人として北欧デザインの中で生活してきた私から、北欧デザインを取り入れるためのヒントを皆さんに紹介していきます。 北欧デザインや、スカンジナビアデザインという言葉を皆さんもよく聞くと思いますが、そのデザインスタイルについての特徴なんかも触れていきたいと思います。また、今のWebやグラフィックデザインに「北欧デザイン」がどのように使われているかという点も説明していきます。皆さんもこの記事をヒントに、次に着手するデザインプロジェクトを北欧デザインスタイ

Photoshopで「画像の中にある●●を消す」といった作業は画像編集でよくある作業だと思います。 togetterで「初心者のPhotoshop加工はプレデターが生まれる→「例えが秀逸」「あるある」と腹を痛めるTL」というまとめがありました。その最初のツイートがこれ。 僕がPhotoshopを教えていて一番好きな瞬間は、「○○を消せ」系の初心者向け課題で、必死で作業すればするほどプレデターを次々に生み出して絶望していく生徒に「もうお前の地球は終わりだ」と講評することです。 pic.twitter.com/gEpXGVx7xo ? ﾚｲﾆｰ氏 (@moeebu) 2016年3月8日 おもしろい例えですね。スタンプツールで補正をすると、同じパターンが連続してしまうパターンです。 Photoshopで●●を消す作業の基本はスタンプツールですが、スタンプツールでチマチマ消す時間もない！という方に

この記事は「Webデザインセオリー Advent Calendar 2015」の11日目の記事です。@striveさんの「Webデザインの価値と効率を上げるため意識していること　Webデザインセオリー Advent Calendar 2015」というとても戦略的でいい記事から一点、小手先の話ですみません・・・！ デザインに写真を使うときにわたしがよくしていること 「デザインセオリー」というと「これをやればデザインはOK！」みたいに聞こえますが、もちろんそんなことはなく、自分が画像をトリミングしたりマスクするとき、イメージや印象を伝えるために、どんな手法をよく使うかということを実例を交えながらご紹介します。 グラデーションマスクにこだわってみる メインイメージなどで、写真の上にメッセージを重ねるのはよくある手法ですね。例えばこの緑をバックにした女性の写真を使用して、上に文字を重ねましょう。

色占い診断の使い方とお願い ファルベコローレは言葉を基に当てはまる配色を表示する色診断サイトです。キーワードを入力すると、その言葉からイメージされる配色とカラー属性を教えてくれます。色数値や色成分の分析や使用例といった様々な色彩データを色彩講座で解説しているので実用的にも使えます。カラーイメージは日にちを開けて再度調べたときに前とは違った色になることもあります。定期的に必ず入れ替わる分けではなく、ずっと同じ色がでる場合もあればガラッと違う色になる場合もあります。その時々で出てくる言葉のカラーリングをお楽しみください。 配色ツールとして デザインやイラスト制作で色の選定で困ったときの配色探しに便利です。カラーコンサルティングにも通じるカラー分析もあるので色に説得力も持たせられます。 色彩講座で色の勉強 言葉のカラーイメージを色相や彩度といった属性で分類したものを見たり、色から感じる温度や色の

画像のリサイズをPhotoshopで行う場合、アクションが便利です。ただ、タテ向きと横向きの写真が混在しているときは注意が必要です。 たとえば元画像に幅1200、高さ900pxの横撮り写真と　幅900px、高さ1200pxのタテ撮り写真が混ざっていたとします。 それらに「画像解像度の変更」で幅1000pxにリサイズするアクションを実行した場合、横撮り写真は幅1200px→幅1000pxへ縮小されますが、タテ撮り写真は幅900px→1000pxへ引き伸ばされてしまいます。 向きを揃えたときに全て同じサイズにしたいのであれば、「画像解像度の変更」ではなく「画像のフィット」を使います。 手順 アクションの記録を開始したら「ファイル」→「自動処理」→「画像のフィット」 次の幅と高さ両方にリサイズ後の長辺サイズを入力。間違って引き伸ばしたくなければ「拡大しない」にチェックします(過去Ver.ではない

Photoshop（フォトショップ）で「バッチでファイルを一括で処理する方法」を初心者向けに解説した記事です。バッチ処理を使うと、画像のサイズを変えるといった同じ作業を繰り返して実行可能。Photoshopの効率アップにお役立てください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？ そんな時に便利なのが「バッチ」の機能です。 バ

手のパーツモデルの事をハンドモデル、通称手タレ（手のタレント）と言うらしいです！ こんにちは、ヘタレカメラマンすしぱくです。('A')ﾉ 前回書いた〔その1〕の記事 グリーンバック素材公開！尊敬している人とコラボが実現した話［その1］ を見てくれた利用者の方々から、 「まるで情熱大陸のようだ！すごい！」 っという期待されたコメントはありませんでしたが、ブログでしか言えない撮影秘話が書けて個人的には満足しております。さて、今回の記事では撮影からリリースまでの苦労話を綴っていきます。 クオリティの担保について 前回の記事で紹介した、僕が尊敬する人（kawachoさん）とコラボレーションすることで、何よりまず心配したことはクオリティの担保です。中途半端な作品ができあがってしまった場合、僕だけ（ぱくたそだけ）ならまだしも、 「kawachoさんと一緒にやっているのにクオリティ低っ・・・」 っと思わ

Photoshopで細い毛先やふわっとした髪の毛をきれいに切り抜く方法です。 今回は画像の切り抜きの中でも難しい、髪の毛の切り抜きです。Photoshopではさまざまな画像の切り抜き方法がありますが、今回使用する機能は、CS5以降の「境界線を調整」です。 CS5以下のバージョンの方も、最後に切り抜きの境界線を合成した背景となじませる方法もご紹介しているので、ぜひ参考にして下さい。 「クイック選択ツール」や「投げなわツール」などで切り抜きする対象物をざっくりと選択します。ふわっとした髪の毛の細い部分も、上図のようにざっくりとした選択で大丈夫です。 今回はshutterstockで購入した写真を使います。 （上記写真はshutterstockで購入した写真です。こちらの写真を使用する際は必ず同サイトで購入し使用して下さい。） 選択した状態で、オプションバーの「境界線を調整」をクリック、ダイアロ

写真に写っている人物を切り抜いて合成する仕事は、世の中にたくさんあります。 特に代表的なのは女性ファッション誌で、モデルの頭から足まで綺麗にトリミングし、すこし角度を傾けてキラキラをつけるなどして、可愛く合成されています。 しかしよく見ると、髪の毛を細かくトリミングされていない事例もみかけます。読者はそこまで見ていないでしょうが、クオリティも大事だと思います。 Photoshopで髪の毛を切り抜く技は、色々なブログで紹介されておりますが、ここでは、切り抜くのが難しい女性の画像を選定しましたので、ぜひご参考にしてください。

こんにちは、デザイナーの王です。ぼくは普段Photoshopを使うとき、極力ショートカットを使っているショートカット野郎です。 英語で言うところの「ショートカット」は、「近道」を表しているというのはみなさんご存知ですよね。方向音痴の方は別として……近道があれば、誰しも遠回りしようだなんて思わないはずです。 今回は、Photoshopの作業効率化におすすめのショートカットを一挙に紹介します。前半では基本のショートカットキー、後半ではプロ向けに選んだ意外と知られていない隠れショートカットも紹介しているので、ぜひ実践してみてください。 macの場合とWindowsの場合それぞれで記述しているので、該当する欄をご確認ください。 「ググってわからないこと」が一瞬で解決するかも？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もお

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。

本エントリーは、以下の目次で構成されています。 2種類のハサミと2種類のWebデザイナー Webデザインの特殊性 ビジュアルのディテールに神が宿らないWebデザイン 美しいが使えないWebデザインをしてしまう理由 Webデザイナーを支配する「強固な固定観念」と「裏の動機」 美しいビジュアルの根底にあるデザインの本質 本当に「最近のWebデザインはつまらない」のか？ ミスマッチが生む不幸なWebデザイン Webデザイナーに求められる自らのスタンス Web制作会社にも求められる明確な価値観 2種類のハサミと2種類のWebデザイナー 例えば、以下のような2種類のハサミが存在するとします。 工芸品のように美しいが切れ味はよくないハサミ 見た目はそれなりだが非常によく切れるハサミ 1は、ハサミとしては売れないでしょう。ただ、それが刺激的で斬新なビジュアルであった場合には、特別な賞を取ったり、美術館に

ワイヤーフレームの間違った使い方 たまにリニューアル案件をいただくときがありますが、見た目より先にコンテンツを整理しましょう、一緒に作っていきましょうと説得するようにしています。このサイトでも様々な角度からコンテンツの重要性を語ってきましたが、最もシンプルな方法は「UX を考えていきましょう」「モバイルファーストで戦略を練っていきましょう」といった専門性の高い言葉を使うのではなく、今までのやり方ではうまくいかないということを分かりやすく説明することです。 従来の Web サイト制作でよくあったのが、まずワイヤーフレームをつくって情報の大まかな構成を設計するというやり方。ワイヤーフレームを作ることは間違っていませんが、コンテンツを作る前に始めてしまうと、あとで大きなギャップを埋める作業が発生することがあります。コンテンツなしで構成を作り始めると、例えば以下のような状況に陥ります。 文字が多過