数がすごいだけでなく、そのクオリティも素晴らしく、商用サイトでもそのまますぐに利用できるUIエレメントが揃ったPhotoshopのPSD素材を紹介します。 単に使用するだけでなく、デザインのバリエーション、エレメントの展開など、勉強にも役立ちます。
こんばんは Latin です。 先週末、CSS Nite LP.29 In-house SEO に参加してきました。いや~勉強になりましたし、非常に面白かったです。 という事で今回は、SEOにも通ずる部分でもあるサイト表示の高速化に役立つ WordPress の画像圧縮プラグインのご紹介です。 プラグインをインストール まずは公式サイトからプラグインをインストールし、有効化。 http://wordpress.org/plugins/ewww-image-optimizer/ 試しにアップロード 画像容量が5.2%、軽くなりました。あれ?思ったより圧縮されてない・・・ 設定で画像のmeta情報を削除するよう再設定 プラグイン設定画面の Optimization settings の部分の「This wil remove ALL metadata (EXIF and comments)」にチ
皆さんこんにちは。ギャプライズ鎌田(@kamatec)です。 今日は過去私が数百社という企業のプランニング・運用をしてきた中で実証した、 最も「手早く」「確実に」コンバージョンを伸ばす方法をご紹介します。 それがEFO、つまり「エントリーフォームの最適化」です。 Webサイトをリニューアルしなくとも、LPを作らなくとも、 エントリーフォームを変えるだけでコンバージョンは劇的に変わるのです。 実際の事例をいくつかご紹介しましょう。 Case1:ブライダル系サービスのEFO事例 http://www.primavera-wedding.co.jp Case2:ギャプライズクリックテールサイトのEFO事例 https://contentsquare.gaprise.jp/ Case3:システム系BtoBサービスのEFO事例 これらの事例はいずれも変更したのはエントリーフォームだけです。 特にフォ
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
ワイヤーフレームとは、簡単に説明するとコンテンツやレイアウトなどを示した設計図や構成図のことを言い、これをしっかり作っておくことでデザインやコーディングといったその後の作業をスムーズに進めることができます。 単にワイヤーフレームと言っても「ツールやソフトを使用する」「基本的に全て手書きで行う」など人によって作り方は違うと思いますが、個人的にワイヤーフレーム作成時に便利だなと感じたツールや素材を紹介します。 また、専門ギャラリーや参考になるショーケースなども併せて紹介するので、あまりワイヤーフレームを見たことないという人はそちらも参考にしてみてください。 便利ツール インストールしたりソフトへの拡張機能として使うものなどもありますが、今回はオンラインで使用するツールを紹介します。 中には使用する為には登録が必要なものや場合によっては有料になるツールもありますが、ほとんどフリーで作成も保存もで
はじめに 塗り編、縁取り編に引き続き、Fireworksでできる文字の装飾について書きました。今回は縁取り編に引き続き「フィルター」を使ってつけられる影の付け方をご紹介します。 ※作業環境はCS5です。 これに手を加えていきます - - - - - - - - - - - 影の付け方いろいろ ふわっと浮き出て見える影の付け方 コラージュっぽく一工夫 くっきり浮き出て見える影の付け方 へこんで見える影の付け方 レタープレス風にしてみる - - - - - - - - - - - ふわっと浮き出て見える影の付け方 ふわっと浮き出て見える影ってこんなかんじです。光が左上から当たっているとして、ぼんやりした影が右下に伸びているようにつけます。 フィルター→「シャドウと光彩」→「ドロップシャドウ」を選んで、下図のような設定にします。 距離:2 色:#000000 不透明度:16% 柔らかさ:2 角度
はじめに 前回に引き続き、Fireworksでできる文字の装飾について書きました。今回は縁取りの付け方をご紹介します。 前回ちょっと使った「フィルター」を使ってつけられる方法ばかりです。 ※作業環境はCS5です。 引き続きこれに手を加えていきます ※文字の色を#000000に設定したテキストツールで「Fireworks」と入力したもの - - - - - - - - - - - 縁取りの付いた文字 縁取り?ってこういうのです。文字の周りに別の色の線がついてますよね。 縁取りの付け方はいくつか方法があります。私が知っているのは下記3つ。 線で縁取り 光彩で縁取り Photoshop ライブ効果で縁取り - - - - - - - - - - - 線で縁取り 線で縁取りをする方法は、テキストオブジェクトを選択した状態でテキストの線の色を設定します。 ここから線のカラーパレットを開いて色を選び、
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
デスクトップ、タブレット、スマフォなどのレスポンシブ対応サイトで使用されているナビゲーションのトレンドを紹介します。 特に小さいサイズになった際に、どのようにアイテムを見せるかさまざまな工夫がこらされています。 Popular Design Trends for Responsive Navigation 下記は各ポイントを意訳したものです。 ブロックレベルのメニュー 凝縮するナビゲーション フォームのセレクトメニュー 非表示のドロップダウン スライドするナビゲーションボックス 終わりに -次のプロジェクトの開始に ブロックレベルのメニュー まずは、ボックスをベースとしたデザインのブロックレベルのナビゲーションです。表示サイズに合わせて、ボックスのサイズが変わったり、配置が変わったりします。
半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 Coda2で検索して来た方へ この記事ではCoda2の事についてあまり触れていません。ですが、こちらの記事でがっつりcoda2の魅力を語っていますので是非ご覧になって下さい。 参考記事:Coda2の使い方をマスター出来るチュートリアル[完全版] Sassってなーに? CSSを拡張しよう!っていう感じのメタ言語らしいです!サスって読むらしいです。なんだか僕的にはいい響き!「ググる」とかと似ているかも。「Sass
廃止されるGoogleリーダーの代替RSSリーダーとして人気のFeedlyだが、その設定を自分好みに変更して利用しているだろうか。PCブラウザ向けFeedlyでは、左メニューのPreferencesから、20以上の項目を設定変更することが可能だ。 日々、RSSフィードを消化していくためにも、自分の使いやすいようにFeedlyを最適化しておくと良いだろう。 GoogleリーダーからFeedlyに移行すべき8つの理由 FeedlyでRSSを高速消化するためのショートカット一覧 アプリの詳細設定についても解説したので参考にしてほしい。 【保存版】Feedlyアプリの詳細設定を日本語で徹底解説 Preferences:設定解説 この記事では、スマホ向けの設定変更ではなく、PCブラウザ向けの設定変更について日本語で解説する。英語表記で設定変更が億劫になっていた人の助けになればと思う。 全てのOS・ブ
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、ゴラクログのデザインを担当をしている鬼石広海と申します。 弊サービスは現在大幅リニューアル中ですので、UI周りはリニューアル後、又機会があればご紹介させて下さい。 今回は、駆け出しのデザイナーさん達の多くが課題にあげる、デザイン作業のスピードアップについてお話します。結論から言いますと、細部から作らずに土台作りを頑張ることが、結果的にスピードにつながるというお話です。 では実際にバナーデザインを例に紹介します。 1.構成要素を全部置く まずはプランナーやプロデューサーと話し合って決めた構成要素を、とりあえず全部キャンバスに置いてみます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く