タグ

aaaiiiii026のブックマーク (366)

  • Coolors.co

  • 指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン

    「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。

    指定したウェブサイトで使われている配色・フォントを抽出してくれるサイト「Stylify Me」 | ライフハッカー・ジャパン
  • Googleのアルゴリズムにおける検索順位に影響を与える200+個の要因のまとめ

    Googleの検索のアルゴリズムにおける検索結果の順位に影響を与える200+個の要因、コンプリートリストを紹介します。 量が多く翻訳するのに一週間かかりましたが、興味深いことが多々あり、とても面白かったです。 Google's 200 Ranking Factors: The Complete List 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 毎日のように海外のまとめ記事を無断転載してアクセスを稼いでいるあのブログの注意喚起を海外のブロガーから聞きます。問い合わせや削除依頼しても対応無しっていうから、たちが悪い。 ドメインによる要因 ページレベルによる要因 サイトレベルによる要因 バックリンクによる要因 ユーザーのインタラクションによる要因 アルゴリズムによる要因 ソーシャル シグナル ブランド シグナル サイト内部のスパム

  • jqueryでyes/noチャートを作る方法 - EZ-SPARROW

    August 28, 2013 Jul 24, 2018 jqueryでyes/noチャートを作る方法をご紹介する。 そもそもこのチャートの呼び名が一般的かは不明だが 「はい いいえチャート」とも呼ばれているようだ。 サンプルデモは複数の答えを想定しているため厳密にはyes/noチャートではないのだが、構造は同じ。 やりたい事は、扱うサービスや商品が多い場合に、 「ユーザに質問に直感的に答えていただき、適合するサービスへと誘導する。」 といった感じ。ノンプログラマーのためかなり強引なコードかも知れないが やりたいことが実現できたので紹介していこうと思う。 解説がいまいち分かりづらいのでまずはデモをご覧あれ。 See the Pen XBRZvd by ez-sparrow (@ez-sparrow) on CodePen. 大まかな流れ 質問と質問に対する答え(選択肢)をdivで囲う。 全

  • HTMLメール制作のコツや便利なサービスいろいろ

    2017年2月1日 Webサイト制作, マーケティング, 便利ツール みなさん、購読しているニュースレター(メールマガジン)はありますか?私は利用しているWebサービス趣味関連のものをあわせてだいたい10サイトくらい購読しています。どれも素敵なデザインのHTMLメールばかりで、見ていて楽しくなっちゃいます :) そんなわけで今回はそんなHTMLメールの現状や、制作時のTipsを紹介します。効果的な導入方法を一緒に考えてみましょう! ↑私が10年以上利用している会計ソフト! HTMLメールとは テキストのみのメールではなく、テキストに色がついていたり、画像が挿入されている、HTMLを使って設計されたメールのことをHTMLメールと呼びます。海外では大手Web系企業をはじめ、多くの会社がHTML形式のニュースレターを配信しています。私が購読しているWebサービスのニュースレターやブログの更新通

    HTMLメール制作のコツや便利なサービスいろいろ
  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • photoshopで紙っぽい質感を簡単に表現する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    今回はつるっとしたオブジェクトを簡単に紙っぽくする方法をご紹介します。 01:境界をざらざらにする まずは長方形ツールで白い四角形を描きます。 次に長方形の選択範囲を選択して、クイックマスクモード(ショートカット:Q)に切り替えます。 クイックマスクモードの状態で、フィルタ→ピクセレート→水晶を選択します。 クイックマスクを解除すると(もういちどQを押す)と選択範囲がギザギザになっているので、その状態でレイヤーマスクを追加します。 紙がギザギザになりました!ついでにドロップシャドウもやんわりかけちゃいましょう。 02:紙をしわくちゃにする 次は紙のしわくちゃした質感を表現します。 ギザギザ部分を選択して(Ctrl+レイヤーマスクサムネイルクリック)、新規レイヤーを追加したあと、黒→白のグラデーションをランダムにかけます。 補足:グラデーションの描画モードは「差の絶対値」にしてください。その

    photoshopで紙っぽい質感を簡単に表現する方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Calltoidea - Light up your imagination

    If you like Calltoidea, let's trythe first community for link lovers.

    Calltoidea - Light up your imagination
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

    『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年3月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材/配色やWeb制作といった最新トレンドも公開中。

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • かすれたようなフォントの作り方(Photoshop)

    今回はPhotoshopでかすれたようなフォントの作り方をご紹介します。 かすれた感じのフォントデザインは最近の流行りですね。グランジ系のデザインにとても合いそうです。 作り方はとても簡単です。今回はPhotoshopで紹介していますが、Illustratorでも同様にかすれたような表現はできます。かすれスタンプ風に加工したイラストの作り方ではイラストレーターで作る方法を紹介しています。こちらも併せてご覧ください。 まずはPhotoshopでかすれさせたいフォントを入力します。 今回はフォントArial、Boldで書いてみました。ない場合は似たようなフォントでも結構ですよ。文字はトラッキング(文字パネル→選択した文字のトラッキングを設定)で間隔を詰めておきます。

    かすれたようなフォントの作り方(Photoshop)
  • フォントは人間の感情にどのように作用するのか?

    By arnoKath 最新の研究によると、フォントは言葉の意味とは別に、それぞれが独自に人の感情を刺激する要素を持っていることが明らかになっています。 The Science Of Comic Sans | Co.Design | business + design http://www.fastcodesign.com/3031622/evidence/the-science-of-comic-sans 「フォント」と似たような言葉としては「書体」「字体」という言葉がありますが、それぞれ以下のように定義することができます。 字体:文字の基的な形を作る部分、文字の形のこと。 書体:「アルファベット」や「ひらがな」のようなまとまった文字について、一貫した特徴や独自の意匠を凝らした字形のこと。漢字でいうと、一般的に用いられる「楷書」、ハンコや書道・篆刻で用いられる「篆書」などがあり、コンピ

    フォントは人間の感情にどのように作用するのか?
  • HTMLメールのメールマガジンのコーディング【下調べ篇】 | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作

    HTMLメールで送信するメールマガジンをコーディングする方法を調べるように! とシャチョーから命令されたので、 不肖さいとうが調べてみました! 制約いろいろ 画像は絶対パス指定で! 画像は必ずサーバ内に保存し、絶対パスで指定します。 テーブルコーディングで テーブルコーディングでないと崩れる可能性が高いです。 CSSの指定はシンプルに CSS3なんて近未来的なものは使えません。 CSSはインラインで 面倒! なので、タグの中からスタイルを拾いだしてインラインで書きなおしてくれるサービスを積極的に利用するといいかもしれません。 http://premailer.dialect.ca/ 背景色やイメージの扱いにひとクセ 背景に関して、background-color以外は使えないメーラーが多いようです。 どうしてもOutlook2007で背景色を利用せねばならない場合、VMLを使わねばならない

    HTMLメールのメールマガジンのコーディング【下調べ篇】 | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作
  • HTMLメールのメールマガジンのコーディング【実際に組んでみた篇】 | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作

    HTMLのメールマガジン、実際に組んでみました。 メーラーという独特の環境や、 昔懐かし(自分で組むのは12年ぶりくらいだ!)テーブルコーディング、 なかなか工夫のしがいがありましたよ♪ 安心して使えるCSSのリストはこれだ!! 基的に、cssはインラインで記述する必要があります。 コーディング中は、こちらのチートシートが手放せませんでした。 作ってくれた方、ほんとうに感謝です!! 「The Ultimate Guide to CSS」 http://www.campaignmonitor.com/css/ テーブルコーディングの勘所 日のサンプルはこちらです。 見ながら読んで下さいね。 alt属性は必須! 画像にする箇所が多かったのですが、 文字を画像にする箇所は、必ずalt属性を入れました。 HTMLメールは受信直後の状態では画像が表示されていないことがあります。 alt属性を入れ

    HTMLメールのメールマガジンのコーディング【実際に組んでみた篇】 | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作
  • 鉄板のメルマガテンプレート〜10%以上の反応率を出すための7要素〜

    ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. マーケティングにおけるメルマガの効果は、著しく下がったと言われている。 事実、メルマガの効果の指標となるクリック率が1%も出ていないという運用例も少なくない。 一方、バズ部のメルマガのクリック率は、最高で15.31%から、最低でも7.54%を記録している。平均すると毎回、大体11.25%程度だ。 つまり、メルマガを効果的に運用すると、ビジネスを成長させるために十分過ぎるほどの反応を取ることができるのだ。 このように、メルマガリストから高い反応率を得るための仕組みは、「見込み客のコンバージョンを23倍にしたリスト管理法」や、「売上を20倍にするリピーター獲得の7つの仕組み」でご紹介させて頂いている。 そこで、日は、メルマガ運用に関する基

    鉄板のメルマガテンプレート〜10%以上の反応率を出すための7要素〜
  • スマホで読ませる! HTMLメルマガで覚えておきたい横幅と文字サイズ | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作

    HTMLメルマガを送信する際に、スマホでどう見えるかは重要なポイントになります。 今回はスマホも考慮に入れたHTMLメルマガを作成する際に気をつけたいポイントを 数字でまとめてみたいと思います。 HTMLメルマガの横幅は600px+背景色 HTMLメルマガの横幅の選択肢は現時点では 600pxか850pxの選択肢があります。 600pxのメリット スマホでの閲覧時にもまだ見れるサイズ感 600pxのデメリット PCで見た際にインパクトに欠ける →補助策として背景色を付けることで多少カバーできる ↓スマホで見ると背景色部分は表示されないので見やすい →背景色の代わりに背景画像もGMailや多くのメーラーで使えるが、アウトルックでは非表示になるので注意。その場合は、背景画像+背景色などの2重対策もありえる。 850pxのメリット PCで見たときにインパクトがある ランディングページなどのクリエ

    スマホで読ませる! HTMLメルマガで覚えておきたい横幅と文字サイズ | 株式会社NONAME Produce(n2p)|デジタルプロモーション企画・制作
    aaaiiiii026
    aaaiiiii026 2014/06/10
    ・横幅→600px・重要な文章→15pt以上45文字以内・押させたいリンク→50px四方以上、押し間違えないマージン
  • 購買意欲を刺激する!印象的なHTMLメルマガ10選

    マラソンに夢中! nonakaです。 毎週通販サイトのhtmlメルマガを作っているので、他の通販サイトのメルマガも多数購読してます。 今回は、通販サイトのhtmlメルマガを集めてみました。 通販サイト html形式メルマガまとめ セレクトショップ:BEYES(バイズ) 【メルマガの横幅】600px。 【構成】バイヤーからの一押しアイテム、毎週更新される特集ページバナー、新商品情報、ファッションコラムなど。その他、購入者限定のメルマガも配信してます! 下専門店:Tabio(タビオ) 【メルマガの横幅】713px。 実際のメルマガ用のhtml 【構成】雑誌掲載商品、季節のリコメンド、ランキングなど要素が豊富! 無印良品 【メルマガの横幅】569px。 実際のメルマガ用のhtml 【構成】バナーが縦に並ぶ構成が多い。 facebookやtwitterの案内もさりげなくヘッダーに入っている。 z

  • 伝わるキャッチコピー 16の法則

    「【伝わるキャッチコピー】を知っている企業と、勉強不足な企業とでは、これから圧倒的な差が出てくるよね」 先日沖縄でセミナーをしたときに、沖縄で活躍しているマーケティングコンサルタント、末次くんと話していました。 世の中には確実に、伝わるコトバが存在します。 伝わるキャッチコピーを勉強して、あなたの会社も圧倒的になりましょう! 伝わるキャッチコピーというのがあります。 ここにあげたものは代表的な法則です。 今までボクがさまざまな販促物を作ってきて、反応のよかったものをまとめたものです。 これを知っていると、POPやチラシ、ダイレクトメール、メールマガジン、ホームページ、ブログなどの反応をよくするための手がかりになると思います。 1:安売り・値引きの法則 「閉店セール」、「売りつくし!」、「リニューアルオープン!」 などなど、安さを訴求するコトバがありますが、ポイントは安い理由を明確にすること

    伝わるキャッチコピー 16の法則
    aaaiiiii026
    aaaiiiii026 2014/06/10
    ・選んであげる・初とか新とか新しい情報・カタカナで「カンタン」・希少性・人が買ったものを欲しがる・ターゲットを限定・使ったり体験したりした時にどういう感想を口にするか?・「知っていました?」と問いかけ
  • Sublime Text 2, 3の使いやすいテーマのまとめ

    Sublime Text 2や3で利用できるシンプルで見やすく、使いやすいテーマを紹介します。 使い慣れたテーマももちろんいいですが、新しいテーマにすると気分も一新され、やる気がアップしますよね。 テーマファイルをSublime Textにインストールする方法は、一番下に。 Spacegray Ocean Dark(キャプチャ), Ocean Light, Eighties Dark の3種類。シンプル好きな方は一度お試しを。 僕は只今、「Ocean Light」を使用中〜♪

  • 2014-03-20 旅に出る理由があった小沢健二と旅に出られなかったタモリ - 逆エビ日記Ver3.0 

    オザケンこと小沢健二さんの16年ぶりの笑っていいとも出演に関しては、生放送を凝視していた時には「あっボーダー」とか「あっ眼鏡」とかそういったことばかりに興奮していまひとつ冷静な気持ちでいられなかったので、録画したものを改めてひとりで見てみたらものすごくいろんな感情が揺さぶられ、有り体に言うとものすごく泣けました。 これから録画を見ようと思っている人はここから先は読まない方がいいです。出来ればご覧になった後にまた読みに来て下さると嬉しいです。 このテレフォンショッキングは、「旅に出る理由があった小沢健二が、旅に出ることが出来なかったタモリに送るメッセージ」であったように私には見えました。 トークの前半でこの16年住んできた世界各地の話をし、それを興味深そうに聞くタモリ。それは別に特別ではない風景で、この30年このコーナーで誰が来ようとずっと繰り返されてきたことでした。 しかしその雰囲気ががら

    2014-03-20 旅に出る理由があった小沢健二と旅に出られなかったタモリ - 逆エビ日記Ver3.0 
  • | Mapletopia

    Mapletopiaあなただけのアメブロデザインお作りします! アメブロカスタマイズ、映像制作、フライヤー制作、 その他 気になったことなど、何でも書き綴っていきます。 駆け出しグラフィック&Webデザイナーのブログ。 © 2012 Mapletopia

    | Mapletopia