Flexboxでスマートニュース（SmartNews）風のレイアウトを実装する方法 | Design Color

2017/11/28 38 users Flexbox SmartNews スマー 個数 レイアウト

かなり前に、スマホ版の関連ニュース一覧の表示をスマートニュース（SmartNews）風にしたいな〜と思い、Flexboxを使って実装してみました。その当時はちょうどFlexboxを覚えたばかりで、個数や画面幅が変わっても柔軟に対応できるのを知って大変感動したのを覚えています。 というわけで、今回はそのとき感じた「知ってよかった！」の気持ちを振り返りながら実装方法をメモしておこうと思います。 スマー... 続きを読む

媒体資料（メディアガイド）を制作した時の手順【デザイン編】 | Design Color

2017/08/22 48 users 手順 媒体資料 デザイン編

もくじ 使用フォント・サイズを決める カラーパレットを作る Illustratorでデザイン デザインをIllustratorからPowerPoint形式に変換 PowerPointで読み込み・最終調整 媒体資料デザインに役立つフリー素材＆サービス 資料デザインのインスピレーションを得られるサイト 1. 使用フォント・サイズを決める いざ資料を印刷してみた時に、「なんだか読みづらい」と感じる資料だ... 続きを読む

Photoshopいらず！CSSで画像を中央トリミングする方法（レスポンシブ対応） | Design Color

2017/02/14 65 users Photoshop CSS レスポンシブ対応 中央 サムネイル

サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサ... 続きを読む

秋らしいデザインを制作する時に参考になるWebサイト＆紅葉や落ち葉のフリー素材まとめ | Design Color

2015/09/29 30 users 落ち葉 あけぼの 夕暮れ 東部 ポスター

春はあけぼの、夏は夜…とくれば、「秋は夕暮れ」ですよね〜！というわけで、今回は夕空と紅葉がテーマのデザインです。11月いっぱいまで公開する予定です！今回もPC版しか作っていないので、スマホの方はPC版表示にして確認してみてくださいね〜！ 参考になる！美しい秋のデザインいろいろ 秋デザインを制作する時に参考になるWebサイトやポスター、グラフィックデザインなどを集めてみました！ 極彩の秋 紅葉の東部... 続きを読む

サイト分析やWeb制作・執筆をスピードアップ！おすすめブックマークレット13 | Design Color

2015/07/08 79 users 執筆 Web制作 スピードアップ サイト分析

ブックマークレットとは？ ブックマークレットとは、一言で言えばブラウザにWebサイトへのリンクではなく“機能”をブックマークしておくもの」です。ブラウザに登録するところまでは一緒なのですが、そのブックマークレットをクリックすることで様々な機能を使えるようになります。 「拡張機能やアドオン使えばいーじゃん！」という考えもあるのですが、拡張機能やアドオンは結構PCのメモリを消費してしまうのですよね…。... 続きを読む

WordPressにシェア数つきオリジナルSNSボタンを実装しよう！取得から表示までの流れを紹介 | Design Color

2015/06/10 37 users WordPress pocket 取得 最初 SNSボタン

仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの中に各SNSのシェア数が表示されています。Pocketに関してはオリジナルデザインでシェア数の取得が認められていないため、表示していません。 設置方法 基本的には以前に書いた「SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ」と流れは全く一緒です。ざっとこの3つの流れでシェア数を取得しています。 最初にページのURL... 続きを読む

日々の業務やWeb制作に役立つ！おすすめChromeプラグイン12 | Design Color

2015/02/09 136 users Web制作 業務 Gmail タスク 日々

日々の業務に活躍 毎日のタスクを管理！「Any.do Extension」 まずは先週も好きすぎて記事にしてしまった「Any.do」。何か頼まれごとをされた時に、タスクをサッとメモをとることが出来るので重宝しています。リマインド機能もバッチリついているのが嬉しいところ。Gmailとの連携などもでき、かゆいところに手が届くプラグイン。 「Any.do Extension」をインストール また、以前に... 続きを読む

ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 | Design Color

2015/01/06 252 users サムネイル画像 バナー広告 タイトル 文字 デザイン

色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトル... 続きを読む

SNSボタンをオリジナルデザインに！設置方法＆シェア数の取得方法まとめ | Design Color

2014/08/18 303 users SNSボタン オリジナルデザイン 取得方法まとめ

もくじ PHPでSNSシェア数を取得する オリジナルSNSボタンを設置する シェア数取得〜SNSボタン設置までの流れ おまけ：cssでフキダシの作り方 仕上がりイメージ 仕上がりイメージはこんな感じです。ボタンの種類は今回は自分がサイト制作時によく設置する以下の5つ（Twitter/Facebook/Google+/はてなブックマーク/LINE）とします。 ※LINEボタンについては残念ながらシェ... 続きを読む

たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） | Design Color

2014/06/09 664 users コーディング時 サンプル 小技 スマホサイト 1行

もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わ... 続きを読む

自分のデザインをチェック！色覚シミュレーションの方法いろいろ | Design Color

2014/01/27 77 users 方法いろいろ デザイン チェック 自分 ブックマークレット

もくじ 【色覚シミュレーションの前に】色覚異常とは Webサイトでシミュレート ブックマークレットでシミュレート フリーソフトでシミュレート スマホアプリでシミュレート Photoshopでシミュレート 【見やすいデザインを作るために】まずはモノクロで視認性チェック 今見ているページをモノクロにできるChrome拡張機能「(un)clrd」 Photoshopでモノクロにして確認する 【色覚シミュ... 続きを読む

jQuery.autopagerで次のページを読み込む間にローディングアイコンを表示させよう | Design Color

2013/10/28 75 users ローディングアイコン アイコン プラグイン ページ 以下

完成図イメージ 今回導入したオートページャーのローディングアイコンとは、以下の図のようなものです。次の記事が表示されるまでの間、グルグルと回るアイコンが表示されます。 オートページャーを実装する時に必要なもの4つ オートページャーを実装するにあたり必要なものは以下の通りです。 1.jQuery.autopager まずはこのプラグインがないと始まりませんねー！さっそくダウンロードしましょう。このプ... 続きを読む

サイトをスマホ対応した時に意識したこと5つ | Design Color

2013/08/06 167 users スマホ 5つ

前々から時間を見つけてチマチマと着手していたスマホ対応がようやく完成しました！「いまさらかよ！」という声が聞こえてきそうです…(＞_＜) 以前は「WPtouch」というプラグインでPC版とスマホ版を切り替えていましたが、ようやくプラグインを卒業してモバイル版オリジナルテーマを作成しました。 今回は、ブログのスマホ対応のご報告を兼ねてスマホサイト作成時に自分なりに意識したポイントや、その際参考にさせ... 続きを読む

CSS Nite @Co-Edo, Vol.17参加レポート！レスポンシブWebデザイン実装時に必要な手法や注意点など | Design Color

2013/07/08 111 users Co-Edo デパ デバイス CSS Nite 手法

先日、CSS Nite @Co-Edo, Vol.17「セミハンズオンで学ぶレスポンシブWebデザイン」に参加してきました。講師はブログ「Design Spice」を運営されているヒロさんです。 濃い内容がもりだくさんでしたので、学んだことをアウトプットしておきます！ レスポンシブWebデザインとは PC、スマートフォン、タブレット…最近は本当に色々な種類のデバイスがあります。それらの数多くのデバ... 続きを読む

[デザイン]角丸を使う理由、不自然な角丸について徹底的に分析した - WEBCRE8.jp

2013/02/27 398 users 角丸 WEBCRE8.jp デザイン 理由 ナナメウエ

角丸の話題が盛り上がってましたね 先々週webデザイナーである彩さん(@maritime_color)のブログDesign Colorで、角丸をどういう場合に使うか、という記事がすごい話題になってました！ デザイン時に注意したい角丸の使いかた | Design Color そしてその後、ナナメウエの変態イラレラー(褒めてます)すずきさん(@suzukisan__)もそれに続き角丸に触れる記事を書い... 続きを読む

ラーメン評論家「本谷亜紀」さんのブログ作成をお手伝いしました。デザインから構築までの流れを紹介！ | Design Color

2013/02/18 55 users デザ 手探り 本谷亜紀 WordPress構築 本谷亜紀さん

先日、女性ラーメン評論家である本谷亜紀さんのブログ作成をお手伝いしました。私はデザイン〜Wordpressの構築までと、制作系を全般的に担当させていただきました。 自分のブログ以外で個人的に制作を手がけたことはあまりないので、手探りながら制作していくうちに色々なことを学べました。 今回は、デザイン時やWordpress構築でどのようなことを心がけたかをご紹介します！ もくじ ブログの目的など デザ... 続きを読む

デザイン時に注意したい角丸の使いかた | Design Color

2013/02/12 606 users 最初 Web制作 機会 うち デザイン

私は以前からデザインに角丸を使うのが好きなのですが、「角丸をもう少し小さくして」と言われることがたまにありました。 最初の頃は「角丸が大きいほうがかわいいのに！」と思っていたのですが、Web制作を続けていくうちに、何故そう言われたのかがようやくわかってきました。 また、最近デザインに角丸を使う機会があったので、これを機に角丸の使い方について自分なりに考えてみました。 もくじ 大きな角丸はあまり使わ... 続きを読む

お正月休みに私がしたブログ見直しの試みあれこれ | Design Color

2013/01/08 30 users みなさん お正月 お正月休み 自分 ブログ

遅くなりましたが、明けましておめでとうございます。2013年初めてのポストです。 みなさんはお正月いかがお過ごしでしたか？私は長いお正月休みを利用して、ずっとサボっていたサイトの見直しをしてみました。それにしても、いつも見ている自分のサイトを「他の人はどう見るのかな？」と考えるのは、なかなか骨が折れますね。 今回は、見直しにあたってどこを改善したのかをざっとご紹介します！ 今回の試みたブログの見直... 続きを読む

とっても幻想的な泡のスクリプト！実装方法やサンプルを紹介 | Design Color

2012/12/18 26 users スクリプト サンプル 実装方法 actyway 紹介

先日あくちーさんが作ってくださった、プクプクと泡を出すスクリプトをブログに実装してみました。 あまりにも嬉しすぎてサンプルなども作ってみましたので、カスタマイズの方法などとあわせてご紹介します！ はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプ... 続きを読む

私が初めてブログのデザインをした時の流れ | Design Color

2012/10/09 113 users 段階 タイトル たくさん オリジナルテーマ デザイン編

先日の「WordPressテーマ作成に役立つ記事＆学んだことまとめ（テーマ作成編）」の「デザイン編」です。タイトル変わっちゃってあまりシリーズ感はありませんが…。 ブログのオリジナルテーマを作るにあたって、デザインの段階でもたくさんの記事にお世話になりました。しかも、私はその時サイトのデザイン経験もなかったので、「ブログのデザインって、何から考えたらいいのかなあ？」というところからスタートしました... 続きを読む

ポータルサイトのデザインをする時に意識したこと5つ | Design Color

2012/07/30 598 users ポータルサイト 備忘録 余白 デザイン サムネイル

お久しぶりです！彩です。ここ最近ポータルサイトのデザインをする機会がありました。ブログなどのデザインとはまた違うので、ポータルサイトのデザインは意外と難しかったです。 これを機に色々と調べたりしてみましたので、学んだことを備忘録として今後のために書き残しておきたいと思います。 もくじ グローバルメニューを埋れさせない 色を使いすぎない 余白を空けすぎない 囲み線を多用・強調しすぎない サムネイルに... 続きを読む

デザインはどこから生まれる？ものづくりの発想と思考をシェアするイベント「DePre! Vol.1」参加レポート | Design Color

2012/06/11 26 users 発想 プロセス デザイナー 思考 興味深いテーマ

世の中にはたくさんのデザイナーから生み出された素晴らしい作品であふれています。ですが、それらの作品が「生まれる前」を覗いてみたいと思ったことはありませんか？ つまり、作品が生まれるまでの「プロセス」です。作品を生み出す前に、デザイナーはどこから発想を得るのか？何を考え、何に悩み、どうやって作品を世に生み出すのか？ そんな興味深いテーマをデザイナー同士がシェアし合うイベント「DePre! Vol.1... 続きを読む

初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む) | Design Color

2012/05/29 1084 users Photoshop アレ web 最初 Cs6

Fireworks覚えなきゃ…！と思いつつ、未だに思いっきりPhotoshop派の彩です。 先日、会社でFireworks派の方と語っていた時に、「Photoshopは○○ができない！」ということを多く聞き、「アレ？」と思いました。「いやいや！できますよ？」と方法をお教えすると、「あー！そうなんだ！最初からこうなってたら嬉しいのに」とのこと。 多くが私がPhotoshopで作業する時に一番最初に設... 続きを読む

すぐに現場で役立ったPhotoshopの機能を紹介！CSS Nite LP, Disk 22参加レポート | Design Color

2012/04/02 85 users Photoshop disk CSS Nite LP 現場

かなり時間が経ってしまいましたが、先日CSS Nite LP, Disk 22「Webデザインで使うPhotoshop」（以下LP22）に参加してきました。 5時間に及ぶ一日がかりのセミナーだったのですが、有用な技や知識の連発で時間があっという間に過ぎてしまいました。 今回は、中でもさっそく制作で使ってみたら本当に役立ったPhotoshopのTipsをご紹介します。 今さら知りました…！便利すぎる... 続きを読む

手軽に漫画風デザイン制作に挑戦できるサービス・アプリ・グッズを紹介 | Design Color

2012/03/12 37 users イチ グッズ アプリ 前回 漫画

漫画風デザイン制作に挑戦できるサービスやアプリ漫画風デザイン制作に役立つサイト14」の続編的なものです。 前回はありがたい素材サイト様のご紹介が中心でした。でも、イチから数ある素材を組み合わせて画像加工も全部自分で…って、実はなかなか難しかったりします。 というわけで、今回は手軽に漫画風デザインに挑戦できるサービスやアプリをご紹介！ああ、こういう風にすれば「漫画っぽく」なるのか！という参考になると... 続きを読む