タグ

デザインに関するhikimatoのブックマーク (3)

  • 誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック

    【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか? ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの? ・結局一番言いたいことはなんなの? ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・

    誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
  • 【はてなブログカスタマイズ/Innocent】LINE風の会話を表現する

    タイトルの通り、LINE風の会話をブログ上で表現します。アイコンの表示はありません。 このブログは、はてなブログテーマ『innocent』( http://moonnote.hateblo.jp/entry/innocent-hatenablog-theme ) を使用していますが、このコードは他のテーマでも、ワードプレスで作ったサイトでも使えると思います(多分…) デモ HTML CSS 参考サイト おわりに デモ こんな感じに表示されます。 ヌッ! 疲れからか、不幸にも黒塗りの高級車に追突してしまう。後輩をかばいすべての責任を負った三浦に対し、 車の主、暴力団員谷岡に言い渡された示談の条件とは・・・。 これもうわかんねぇな HTML HTML編集モードでLINE風にしたい会話をdivで囲み、クラス名をline_wrapperにします。 左の吹き出しに入れたい文章のpタグクラス名をlin

    【はてなブログカスタマイズ/Innocent】LINE風の会話を表現する
    hikimato
    hikimato 2017/01/06
    会話風の表示をされている方をチラホラ見かけて、ぼくもいつか導入してみようかなと思って寝て忘れていた頃にみてしまった記事でした。忘れないようにブクマ
  • コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY

    今回はひたすら配色パターンを紹介していく。探しやすいように色ごとに分け、使いやすいように解説とWebコードも合わせて紹介する。プレゼン資料、Webデザインなどで目的に合った配色をそのままコピペして使って頂ければと思う。 ▼ 目次 カラフルな配色パターン 橙系の配色パターン 青系の配色パターン 緑系の配色パターン 黄色系の配色パターン 赤系の配色パターン 高級感を表現する配色 わび・さびを表現する和風配色 シンプルに格好良いグレーの配色 カラフルな配色パターン 1. 淡い「カラフル」 ■ #FF7D7D ■ #FFD580 ■ #B3E2B4 ■ #ABE7FF ■ #B8B2EA ■ #DBDBDB 淡いカラフルな配色は、白の背景に合わせると「透明感」を出すのに効果的。カラフル系の配色は扱いづらいので、上のコードをそのままコピペして使って頂くのが良いかと思う。 2. 力強い「カラフル」 ■

    コピペで使えるオシャレな配色パターン見本 25 (全組み合わせWebカラーコード付) - LITERALLY
  • 1