サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
designcolor-web.com
はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします! もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ(エッジを整列)」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…! CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください! 1.
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに黄金比や白銀比を使ってみる 1.グローバルメニューを埋れさせない ポータルサイトは情報量がとても多いです。ユーザーを迷わせないためには、画面が遷移しても変わらずそこにいてくれる「グローバルナビゲーション」は頼りになる存在です。それが他の情報に埋れてしまってはもったいないですよね。なので、デザイン時にはまずこの子に注目してみました。 白抜きのメリット 色々なサイトを観察していると、ナビゲーションバーに白抜きを使っているサイトが多く見られました。 調べてみたところ、白抜きは小さな文字でもやや大きく見えるというメリットがあるとか。なぜなら、白は「膨張色」だからです。 膨張色とは明度が高いことから、他の色に比べて膨らんだり広がったり錯覚する色のことです。白や明度の高い暖色系が膨
もくじ 大きな角丸はあまり使わないほうがいい理由 要素によって角丸の大きさを使い分ける理由 大きめの角丸でもおかしくない場合は? 角丸の大きさを後から調整するPhotoshopプラグイン はじめに なんとなくで使っていたけど、一度ちゃんと考えてみよう!と思わせてくれたきっかけは、こちらのスライドでした。 今回は、こちらのスライドの角丸についての部分に沿って考えていこうと思います。 少ない手間と知識でそれなりに見せる、ズルいデザインテクニック 大きな角丸はあまり使わないほうがいい理由 「ズルいデザイン」のスライドでは、「角丸は5〜6pxくらいが最も無難でキレイ」とのこと。また、下記のようにも言われています。 「R半径が大きい角丸は、野暮ったいデザインになりやすいので、あまり使わないほうがよいです」 引用元:少ない手間と知識でそれなりに見せる、ズルいデザインテクニック たしかに、私も以前に、デ
もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ:cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ(Twitter/Facebook/Google+/はてなブックマーク/LINE)とします。 ※LINEボタンについては残念ながらシェア数の取得方法がわかりませんでしたので、LINEボタンのみ吹き出しはナシです。 ※LINEボタンはオリジナルデザインにできない決まりなので、LINEボタンのみ公式デザインです。 今回もサンプルを作ってみましたよ〜。 サンプル お世話になった記事 今回の記事は以下のサイト様にお世話になりました!ありがとうございます!特にPHPでのシェア数の取得方法は本当に助かりました。もはや今回の記事はこちらのサイ
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
もくじ ゲームサイトのデザインいろいろ ゲームサイトに特化したギャラリーサイト 「ゲーム」タグがあるギャラリーサイト ゲームのデザインをまとめた記事 ゲーム関連のアイコン ゲーム関連デザインのためのチュートリアル ゲームサイトのデザインいろいろ まずゲームサイトのデザインとはどんなものがあるのでしょうか?本当に様々ですが、中でも雰囲気や見せ方がそれぞれ異なるサイトを4つピックアップしてご紹介します! ジョジョの奇妙な冒険 オールスターバトル バァーンッ!!まずはFlashバリバリ!のジョジョのゲームサイト。かっこいいしキャラを大きく打ち出しているのでインパクト抜群です!なんかもう、色んなとこホバーすると色んなものが動きます。これぞゲームのサイト!ってくらい仕掛けがたくさんです。文字で効果音が出たりするところが漫画っぽくもありますね。 トゥームレイダー 黒を背景にしていてシリアスな雰囲気や「
もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基本的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか!しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。(とはいえ、タグやはてブのリンクまでは大きくできなかったのですが)一部を除いては基本的にはリンク要素は「44px以上」
レスポンシブ対応jQueryコード 1.スクロールすると現れて追尾するトップへ戻るボタン スクロールすると現れるページ上部へ戻るボタンです。よく見るやつですね。PC版ではスクロールするとふわっと画面右下に現れて追尾しますが、スマホ版(ウィンドウ幅480px以下)ではついてこられると鬱陶しいので画面最下部に固定しています。 まずは、ある程度スクロールするとフェードインして現れるjQueryコード。 <!-- jQuery --> <script> $(function(){ var pageTop = $("#pageTop"); pageTop.click(function () { $('body, html').animate({ scrollTop: 0 }, 300); return false; }); $(window).scroll(function () { if($(th
また、以前に書いた「Any.do」の記事はこちらです。併せてどうぞ! おすすめタスク管理ツール「Any.do」を紹介!リマインド機能やスマホとの連携が便利 | Design Color 以前に書いた「Any.do」の記事 ブラウザの開きすぎにご用心!「The Marvellous Suspender」 追記 以前は「The Great Suspender」を紹介していましたが、マルウェアが含まれているとして、Chrome ウェブストアから拡張機能が削除されてしまったため、代替の拡張機能である「The Marvellous Suspender」を紹介しています。 作業中、調べ物などをしていてついついブラウザを開きすぎてしまい、PCが重くなってしまった経験ありませんか?このプラグインを入れておけばアクティブでないタブを停止状態にすることができます。 停止までになる時間を「5分」「15分」「30
CSS Nite @Co-Edo, Vol.17参加レポート!レスポンシブWebデザイン実装時に必要な手法や注意点など 2018 1/03 レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバイスにワンソースで対応する技術が「レスポンシブWebデザイン」です。具体的には、閲覧しているデバイスの画面サイズに応じてサイトのレイアウトを切り替えてくれるというもの。 例えば以下のサイトでは画面幅が変わるごとにレイアウトとおじさんの顔が変化するという面白い作りになっています。 Hello Fisher 他にPCサイトを各デバイスに対応する方法としてはPHPなどで表示を切り替える方法がありますが、そうなると各デバイス用のデザインやソース、画像を新たに用意する必要が生じてきます。 もちろん、何も対応しなくても各デバイスからPC
もくじ 「ブログらしいデザイン」を知る デザイン前に手描きでワイヤーフレームを作る 配色はツールにお任せ【Kuler】 デザインにぴったりなフォントを選ぶ【Nexus Font】 おまけ:どこかひとつに「おっ」と思わせるしかけを 「ブログらしいデザイン」を知る 以前に「ポータルサイトのデザインをする時に意識したこと5つ」という記事を書きましたが、「ポータルサイトらしいデザイン」や「ブログらしいデザイン」というように、サイトによって「向いているデザイン」も変わってきます。 ブログの第一の目的は「記事を読んでもらう」こと。なので、デザインにとりかかる前にまず「記事を読んでもらえるようなデザイン」とはどういうものかを調べました。また、たくさんのブログのレイアウトを観察しました。 こちらの記事が参考になりました! [非Webデザイナー向け] カッコイイブログを最速でデザインするための簡単 5 ステ
1. Font-familyの選定「Font-familyメーカー」 Windows・Mac・iOSの標準フォントの一覧が見れて、ドラッグ&ドロップで自分で組み合わせて好きなFont-fammilyが作れるWebサービスです! 全部に共通してインストールされてるのはどれだろうとか、このOSではこっちのフォントで代用しよう…なんてあれこれ考えながらFont-familyを考えることができます。 有名サイトで使われているFont-familyが見れたり、特にこだわりが無い時はサルワカさんの「おすすめ」が見れたりと、かゆいところに手が届く便利サイト! Font-familyメーカー:標準フォント一覧からサクッと指定 2. 画像の縦横比計算「web計。」 昔からお世話になってる縦横比を計算してくれるWebサービス。サムネイルのサイズを計算する時など、本当に時短になって助かってます。黄金比や白銀比、
漫画風デザインのサイト 漫画風デザインを制作する際に参考になるサイトをご紹介します。 面白法人カヤック みなさんご存知のカヤックさんのサイトです。マウスホバー時に大きな集中線と共に「パンパカパーン!!」とポップな効果音が飛び出す楽しいしかけが施されています。 那覇 居酒屋いさやん こちらのサイトも大きな効果音が集中線と共に使われていてインパクト大です。黄色と黒の組み合わせも手伝ってより効果が強まっている感じがします。 Manga iPhone Application | Manga from Japan こちらはiPhoneの漫画アプリのサイトです。 漫画の一場面のイラストを背景の多様な効果音が盛り上げています。 このアプリほしい!と思いましたが、米国用のiTunesアカウントが必要なようです。 アンドロイダー こちらはAndroidアプリの紹介サイトです。元気な配色はもちろんですが、なん
今さら知りました…!便利すぎる「コンテンツに応じる」機能 皆さま、Photoshopの「コンテンツに応じる」機能をご存知でしょうか?巷では略して「コンじる」機能とも言われているようですw(以下、そう呼びます) PhotoshopはCS4以降、「コンテンツに応じて?」という言葉を使った自動処理機能を強化してきたようです。 では、その「コンじる」機能とは何でしょう。講師として登壇して下さった結城 しおりさんと鷹野さんが、「コンじる」機能を教えてくださいました! 人肌は守ります!「コンテンツに応じて拡大縮小」 こちらは講師の結城 しおりさんに教えていただきました。 みなさん、バナーなどを作る時、 「あー!素材の幅がちょっと足りない」ということはありませんか? こういう時、足りない部分を補完してあげてもいいいのですが、 時間がないのー!という時にはこれです! イヤイヤイヤイヤ!!と思いますよね?で
ブックマークレットとは? ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん!」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。なので、ちょっとしたことをするならばブックマークレットを使ったほうがPCのメモリの節約になるのでオススメです! サイト運用・分析に使えるブックマークレット あらゆるSNSでの反響がすぐに分かる!「ソーシャルてんこ盛り」 まずは私が1番お世話になっているブックマークレットである「ソーシャルてんこ盛り」。これ1つで気になるページのSNSでの反響をいっぺんに知ることができます!また、このブックマークレッ
もくじ 【色覚シミュレーションの前に】色覚とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュレーションの前に】色覚とは 色覚シミュレーションの方法をお伝えする前に、ざっくりと「色覚」についてご説明します。色覚には「P型」「D型」「T型」「A型」「C型」の5つのタイプがあり、それぞれ以下のような特徴があります。 P型:赤い光を主に感じる錐体が無い、あるいは分光感度がずれている D型:緑の光を主に感じる錐体が無い、あるいは分光感度がずれている T型:青い光を主に感じる錐体が無いため、青色付近の識
2.ローディングアイコン 読み込んでいる間に表示させるローディングアイコンを用意しましょう! 私はこちらのサイトでローディングアイコンを作成しました!細かい設定ができるジェネレーターです! 3.「次のページへのリンク」を取得する関数 「オートページャー」とは、分割されている「次のページ」を今みているページ内に継ぎ足して読み込んでくれるものです。なので、「読み込むべき『次のページ』とは何ページ目なのか」を指示してあげなければならないですよね。 ※オートページャーの場合は「前のページにもどる」ことは考慮していないので、「次のページへのリンク」だけでOKです。 例えば一番簡単な方法だと「現在のページ + 1」で次のページの値が取得できます。 以下はものすごくシンプルにした「次のページへのリンク」を取得する関数の例です。 <?php function nextpage(){ //現在のページを取得
追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…!というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう! CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1:object-fit版 「object-fit」というプロ
「Ajaxでページ遷移する」ってどういうこと? そもそも「Ajax」とは? Ajaxとは以下のように定義づけられています。 Webブラウザに実装されているJavaScriptのHTTP通信機能を使って、Webページのリロードを伴わずにサーバとXML形式のデータのやり取りを行って処理を進めていく対話型Webアプリケーションの実装形態。 引用:Ajaxとは – 意味/解説/説明/定義 : IT用語辞典 つまりはブラウザをリロードせずに、サーバとのデータのやりとりを可能にすることなのですね!「オートページャー」にはこのAjaxの技術が使われています。 Ajaxでページ遷移する「オートページャー」の仕組み オートページャーとは、分割されている「次のページ」を今みているページ内にAjaxで継ぎ足して読み込んでくれるものです。以下の図のような形となります。 普通のページ遷移であれば、1ページ目、2ペー
ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介! 2015 9/25 もくじ ブログの目的など デザイン ラーメンぽい配色 角丸を使って女性らしく 「ゆるっと」感を出すために手書き風に 画像はなるべく使用せず、テキストベースに WordPress サイドバーやフッターは全部ウィジェット 管理画面のカスタマイズ 広告を管理するためのプラグイン「AdSense Manager」 はじめに ラーメン評論家「本谷亜紀」さんとは 本谷亜紀さんは「ラーメン女子大生」として、テレビ朝日「お願い!ランキング」など数多くのメディアに出演し、近年は「女性ラーメン評論家」として活躍されている方です。とても可愛らしくて素敵な女性です。 「本谷亜紀のゆるっとラーメンブログ」とは 私がブログ作成をお手伝いすることになったのは、「男子ハック」の純平(@JUNP_N)さんか
個人的に「探しやすい」と思うギャラリーサイトの特徴 ギャラリーサイトでWebデザインを探していた時、「次へ」ボタンを何回もクリックするのが面倒で、スクロールするだけでページが次々と読み込まれる「無限スクロール」の存在にとても助けられました。 個人的に、以下の3ステップのみで素早く目的のサイトに到達できる構造が好みです。 スクロールする サムネイルをクリックする 新しいウィンドウで該当ページが開く 次からは上記をすべて満たした私のおすすめギャラリーサイト10選をご紹介! straightline bookmark ダークなデザインがかっこいい「straightline bookmark」。ここが1番お世話になっているかもしれません。「tags list」からすぐにお目当てのデザインを検索できます。1番のお気に入りは「レイアウト」で絞り込めること。サムネイルの表示サイズを変更できるのも便利。
1. 使用フォント・サイズを決める いざ資料を印刷してみた時に、「なんだか読みづらい」と感じる資料だと商談相手に読んでもらえないかもしれませんよね。手に取った時にきちんと内容が伝わるよう、適切なフォントや文字サイズを知っておきましょう。 基本的にはゴシック体を使用する 明朝体は可読性(長い間読んでいても疲れにくい「読みやすさ」のこと)が高いフォントと言われていますが、媒体資料の場合は疲れが生じるほど長文になることはほぼありません。であれば、視認性(パッと見ただけでも認識できる「見やすさ」のこと)の高いゴシック体を使うのがベターです。 とは言っても、必ずしも明朝体を使うのがNGということでもありません。例えば、「BLOGOS」の媒体資料では、見出しや短いテキストに明朝体が用いられており、それによって媒体の洗練された雰囲気が強く印象づけられています。 基本的には資料にはゴシック体を用いたほうが
もくじ ローカルの環境構築 テーマ作成 全体的な行程 部分的な機能の実装 使用したプラグイン サムネイルサイズ一括変更 – Regenerate Thumbnails テーマの表示確認 – WordPress Theme Test Drive リリース前 – Maintenance Mode やってしまったミス・・・ GoogleAnalyticsのコードを埋め込み忘れてしまった functions.phpのタグを閉じてしまった ローカルの環境構築 死ぬほど簡単にローカルにWordPress環境を構築できる「BitNami」の導入方法!(Mac編) | OZPAの表4 新しいことを覚える良いチャンスだなということで、WordPressのテーマを作るためにBitNamiを導入してみました。 … 個人的にはXAMPPよりはるかに簡単でした! 以前にXAMPPでローカルの環境構築しようとして全然
ちょっと前までGoogleマップをレスポンシブにするために、以下の方法を使わせていただいていました。 @media (max-width: 767px) { iframe { width: 100% !important; } } とても便利な方法なのですが、これだと横幅はちゃんとレスポンシブになるのですが、高さはPC版に埋め込んだソースをそのまま引き継ぐので、ちょっと間延びした印象になってしまいます。 何かいい表示方法はないかなあと探していた時、lifehackerさんの記事で以下のコードが紹介されていました。以下のコードの「75%」の部分を変更することで、地図の縦横比を変えることができます。 .google-maps { position: relative; padding-bottom: 75%; /*これが縦横比*/ height: 0; overflow: hidden; }
Web コーディングや Web系全般のTips デザイン デザインのノウハウや 便利な素材紹介など アート 好きな画家や 展示会についての情報 生活 暮らしから得た知識や 妊娠、出産、育児について
ブラー(ぼかし)エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです!この「ぼかす」表現を「ブラー(blur)エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの?」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします! なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜! CS
スマートニュース(SmartNews)風の表示とは 「スマートニュース(SmartNews)」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ! 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース(SmartNews)風
「漫画風デザイン制作に役立つサイト14」の続編的なものです。 前回はありがたい素材サイト様のご紹介が中心でした。でも、イチから数ある素材を組み合わせて画像加工も全部自分で…って、実はなかなか難しかったりします。 というわけで、今回は手軽に漫画風デザインに挑戦できるサービスやアプリをご紹介!ああ、こういう風にすれば「漫画っぽく」なるのか!という参考になると思います。 漫画風デザインを投稿できるサービス マンガジェット! 前回もご紹介した「漫画素材辞典β」さんが最近リリースした新たなサービスです。 素材を組み合わせて1コマ漫画を作り、それをTwitterに投稿できるというもの。 私もやってみました。 キャラクターはもちろん素子ちゃん。表情も豊富に用意されています。 キャラ・背景・吹き出しを選んで、文字を入力して…と、とても簡単です。 完成がこちら。 ただ、この時私は電車乗り間違えていたわけもな
次のページ
このページを最初にブックマークしてみませんか?
『Design Color』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く