タグ

webに関するyaoki_dokidokiのブックマーク (105)

  • Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」

    「学校では教えてくれない、89の時短テクニック」「自己流で時間をムダにしていませんか?ウェブデザインをもっとラクに、もっとすばやく」ということで、かなり実践寄りの効率的なテクニックばかりを集めたのが「神速Photoshop [Webデザイン編]」です。ちょうどPhotoshop CC+Lightroom 5が月額980円で使える「Photoshop 写真家向けプログラム」を使い始めたところだったので、しげしげと読んでみてお役立ちっぽいのがないかどうか探してみました。 まず以下が神速デザイン五カ条、「ショートカットを活用しよう」「最新機能を使いこなそう」「目的によってツールを使い分けよう」「「直し」に強いデータを作ろう」「面倒な作業は自動化しよう」ということで、どれもこれもごもっともな感じ。人は放っておくと今までの慣れ親しんだやり方が非効率的であっても「慣れているから」というただそれだけの理

    Photoshopで30分かかっていた作業がわずか1分でできるようになる「神速Photoshop [Webデザイン編]」
  • Micro-Moments and The Customer Journey - Think with Google

    Marketing is at an inflection point. Here’s why that’s an opportunity

    Micro-Moments and The Customer Journey - Think with Google
  • 2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA

    HTMLCSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります(※)。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

    2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
  • 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている8つのこと。 - 笑顔を創りたいWebディレクターの日常

    なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様(謎) そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸12年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです

    数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている8つのこと。 - 笑顔を創りたいWebディレクターの日常
  • Webデザインでよく使うUI要素の名称・用語一覧 - Qiita

    Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの

    Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
  • WordBench奈良でAdobe Illustratorによるテーマ開発についてお話してきました | Cherry Pie Web

    紅葉シーズン真っ盛りの2016年11月19日、WordBench奈良のモデレータ 高井さんからお誘いを受けて、WordBench奈良に初参加させていただき、お話をさせていただきました。 当初は、以前に京都や神戸でやった「デザイン教えて君」のような内容を希望されていたのですが、参加者の傾向からデザイナー寄りの話が良いだろうということで、Fireworks開発中止以降のWebデザイン手法についての話をさせていただくことになりました。 (参考)WordBench京都のときの記事 https://www.cherrypieweb.com/wp/weblog/technical/20140325125217.php

    WordBench奈良でAdobe Illustratorによるテーマ開発についてお話してきました | Cherry Pie Web
    yaoki_dokidoki
    yaoki_dokidoki 2016/11/24
    よむ
  • レトロエンジニアのための近代Webフロントエンド事情 - Qiita

    フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、

    レトロエンジニアのための近代Webフロントエンド事情 - Qiita
  • 明日、あなたの惑星で──ヴァレリー・フィリップスの21世紀型ガールズ・フォト

  • 海外最新webデザイントレンド参考まとめ (2016年11月) - I AM HARRY

    今月も海外では、今までとは少し違う流れのwebトレンドが出てきていますので、ご紹介させていただきます。 関連記事:海外最新webデザイントレンド参考まとめ(2016年8月) 1. パープルカラー 今まであまり見られなかったパープルカラー。使用する上で少し難しいカラーの象徴でもあるパープルカラーですが、今少しずつ流行りつつあります。パープルカラーは、ブランディングする上で象徴的なカラーというよりも、今までは、webデザインにおいても補色的な役割がほとんどでした。 しかし、海外のwebデザイナー達は、このパープルカラーを今、大胆に使用しています。紫のカラーをサイトのメインカラーとして使用したり、ボールドをかけたテキスト、今までになっただけにかなり印象的です。 ここで使用するのに難しいとされているパープルについて、効果的な使用方法についての共通点をご紹介します。 モノトーンのカラースキームで統一

    海外最新webデザイントレンド参考まとめ (2016年11月) - I AM HARRY
  • Webブラウザで現在地情報を正しく取得できない場合の原因と対策

    対象ソフトウェア/ハードウェア:Google Chrome 50以降、Opera 37以降、Safari 10以降、iOS 10以降を搭載のiPhoneiPad/iPod touch、Android OS搭載スマートフォン/タブレット、Windows PCMac 解説 スマートフォンやタブレットではGPSなどで現在地を検出できることを利用して、今や多くのWebサービスが現在地を活用した便利な機能を提供している。例えば、ユーザーが今いる場所から最も近い飲店を案内したり、現在地の天気予報を自動的にお知らせしたり、といった具合だ。 ところが、2016年4月ごろからはGoogle ChromePC用を含む)で、また2016年9月ごろからはiOS(iPhoneiPad/iPod touch)上のブラウザやMacのSafariで、こうしたWebサービスにアクセスすると現在地の周辺地図が正しく

    Webブラウザで現在地情報を正しく取得できない場合の原因と対策
  • メディアサイトの記事ページをデザインするときに、参考になる数値まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーのまきこです。モーニング娘。’16のオーディションのゆくえが気になる今日この頃です。 さて、LIGでは、日々たくさんの企業さまからさまざまなサイト制作についてのお問い合わせをいただいています。その中でわりとご依頼が多いのが、メディアサイトの制作です。 メディアサイトの制作でキモとなるのが、記事ページの文字周りのデザイン。ここがうまくいかないと、いくら魅力的な記事が書かれていても、ユーザーにしっかり読んでもらって価値を提供することができません。そこで今回は、世の中のメディアサイトやWebマガジンの中から「人気がある」「デザインのクオリティーが高い」とわたしが勝手に思うサイトを10点選び、記事ページの文字周りがどんな数値でデザインされているのかを調べてみました。 調べ方について 下記の図のような数値について、PCMac(ディスプレイ幅1440px)で、SPはiphone

    メディアサイトの記事ページをデザインするときに、参考になる数値まとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

    ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは 何か一つのサイトを作ろうとすればWebデザイナーという役割が必要になるでしょう。そしてユーザーエクスペリエンス(UX)を最大限向上させなければなりません。UXにおける4つの間違いと改善策を事例をもとに紹介しています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査 稿は、Webdesigner Depotのブログ記事を了解を得て日語翻訳し掲載した記事になります。記事は、H

    ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは
  • フリーランスのデザイナーが0から仕事をもらっていくための戦略をまとめてみる - LITERALLY

    先日『1年でフリーのWebデザイナーになった僕が実行した8つのステップ』という記事を書いたところ、フリーランスデザイナー志望の方からクライアントからの仕事のもらい方や価格設定等についてご質問を頂いた。今回は、返答がてらフリーのデザイナーが仕事をもらっていくための戦略をまとめてみようと思う。 あくまでもここで書くのはぼくが実行したことと、実行すれば良かったのかもしれないという個人的なアイデアなのでご注意ください また、ここではデザインスキル・プログラミングスキルがある程度あるものとして話を進めていきます Webポートフォリオを作る ポートフォリオは知名度のないフリーランス仕事をもらうための唯一の武器 個人で仕事を進めていくのであれば、ポートフォリオは必要不可欠だ。身元もよく分からないフリーランス仕事の質を保証してくれるのはただ1つ「制作実績」だけだからだ。当たり前だがポートフォリオには自

    フリーランスのデザイナーが0から仕事をもらっていくための戦略をまとめてみる - LITERALLY
  • WordPress のオリジナルテーマ開発で使用した技術やツールまとめ | WP-E (仮)

    どうもどうもお久しぶりでございます、EXP の Hinotan です。私の前回の記事の日付を見てみたら、なんと1年も前だったんですね―。こりゃイカン! ということで、今回は EXP の WordPress オリジナルテーマ開発で各制作フローごとに使用した技術・ツールなどの紹介をしたいと思います。 目次 チーム開発で必要なドキュメントの策定: GitHub Wiki デザイン: Sketch Page と Artboard の機能 ダミー画像の生成もプラグインでらくらく 環境構築 GitHub Flow でチーム開発 開発マシン: vccw gulp でビルドとコンパイル コーディング Jade でプロトタイピング BEM に準拠した CSS 設計 CSS フレームワークの foundation を Sass でカスタマイズ _s ベースで WordPress へ組み込み 最後に 1. チー

    WordPress のオリジナルテーマ開発で使用した技術やツールまとめ | WP-E (仮)
  • もう探さない!迷わない!ファイル&フォルダ管理法 | WebNAUT by Beeworks

    大量のプロジェクトを進行するビーワークスが、年々試行錯誤しながらたどり着いた、ファイル&フォルダ管理手法をご紹介します。 こんにちは、プランナーの川村です。 今日は、PCを使って仕事をする方の多くが悩まされるであろうファイルやフォルダの管理について、ビーワークスが試行錯誤の末にたどり着いた管理法をご紹介します! そもそも制作の現場では、企画書、サイトマップ、PSDデータ、htmlデータなど、さまざまな成果物・中間成果物を扱います。その上、それぞれのファイルについて、変更・修正の回数分だけバージョン違いのファイルが増えていく…となると、ファイルやフォルダの管理は、地味ながら、実はとても重要なミッションなのです。 特に、制作ボリュームの多い大規模案件や、多人数が関わるプロジェクトの場合、ファイルやフォルダの中身をメンバー同士で正しく共有できているかどうかは、品質や作業効率にも大いに影響します。

    もう探さない!迷わない!ファイル&フォルダ管理法 | WebNAUT by Beeworks
  • Nianticの求人から推測する『Pokémon GO(ポケモンGO)』のサーバ構成 - Qiita

    1ワールドで済ますというチャレンジ Nianticの求人を見ていて、凄く驚いたのは、「Software Engineer - Server Infrastructure」での次の項目。 all on a single, coherent world-wide instance shared by millions of users. 対訳 全ての(アクション)は、数百万のユーザーに共有された単一の一貫した(サーバ群で行われる) つまり、ポケモンGOは1ワールドで構成されている。MMOのサーバを作ったことがある人なら5それがどんなに大変かピンとくるだろう。特に、ポケモンGOの様に一日に数百万人とかが遊ぶゲームで、1ワールドでゲーム世界を構築するのは、結構大変だ。6 MMOで1ワールドがなぜ大変か(データストレージとの戦い) MMOの様なオンラインゲームで、1ワールドがなぜ大変かを図示する。

    Nianticの求人から推測する『Pokémon GO(ポケモンGO)』のサーバ構成 - Qiita
  • 無限スクロール vs ページネーション:それぞれの特徴と使い分け

    無限スクロールのメリット 1.ユーザーを没頭させ、コンテンツを発見させる データ探索の主要な手段としてスクローリングを使う場合、無限スクロールはユーザーをwebページにより長く滞在させ、よりエンゲージメントを高めることができます。ソーシャルメディアの人気に伴い大量のデータが消費されている中、無限スクロールは、ページが前もって読み込まれるのを待つことなく、膨大な情報を閲覧するための効率的な方法です。 無限スクロールは、「発見」のためのインターフェースであれば、ほぼ必須の機能です。ユーザーが特定のものを探していない場合、気に入った一つのものを探すために大量のアイテムを見る必要があります。

    無限スクロール vs ページネーション:それぞれの特徴と使い分け
  • HTTPリクエストを減らすために【序章】HTTPリクエストは甘え - MOL

    このシリーズはHTTPリクエストの理解を通じてWebパフォーマンスの重要性について考える5章構成になっている。 【序章】HTTPリクエストは甘え 【CSS Sprite編】スプライト地獄からの解放 【WebFont編】ドラッグ&ドロップしてコマンド叩いてウェーイ 【DataURI編】遅延ロードでレンダリングブロックを回避 【終章】我々には1000msの猶予しか残されていない 1日目は、HTTPリクエストの概要について説明する。 例えに、私のポートフォリオページ(t32k.me)が表示されるまでの流れを見ていく。まず、検索からでも方法はなんでもよいが、ブラウザのURLバーにt32k.meと打ち込んでアクセスする。そのページを見にいくということは、つまりt32k.meに対してHTTPスキームでリクエストするということを意味している。 クライアントであるブラウザは入力されたURLを判断して、リソ

  • 2016年、Webデザインの考え方、Photoshopの効率的な使い方、制作現場の生のテクニックが分かる生ビールみたいな本

    Webデザインの今が分かる良書「Webデザイン必携。」が、Kindleセールでかなりの激安です。 デザイナーとしてWeb制作で役立つ必須知識、基的な考え方、効率的なデータの作り方など、制作の現場ですぐに役立つ知識やテクニックを身につけることができる一冊です。 表紙のデザインは、完全に生ビールです! 参考写真: 写真AC ※版元様に許諾を得ています。 ここ数年で、Webデザインは大きく変わりました。 ビットマップからベクターが主流になり、ページはマルチデバイス対応、パララックスなどのインタラクション アニメーション、最小要素からデザインする「Atomic Design」など、成果物やワークフローも進化を続けています。 書は制作現場のナマの知識が学べ、Webデザインの初心者だけでなく、現役でバリバリ活躍している人にもオススメのです。 Kindle月替わりセールで書籍版の半額以下、さらに2

    2016年、Webデザインの考え方、Photoshopの効率的な使い方、制作現場の生のテクニックが分かる生ビールみたいな本
  • LIGデザイナーの仕事の進め方やコツとは?質問にお答えします! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは。アートディレクターのぺちこです。 「あなたの質問にLIGのデザイナーがお答えします!」というテーマのもと、みなさまから募集した質問に答えています。今回は、仕事の進め方やコツについての質問にお答えしていきます! 仕事の進め方編 ターゲットやコンセプトなどが決まってから、トップページのワイヤーフレーム、デザインをするのに何時間ぐらいかけますか? よーいドン、と時間を計りながら作ったことはないので、明確に◯時間! と言い切ることは難しいのですが、LIGではTOPページデザインの期間をだいたい3~5営業日確保しています。 とはいえ、その日数の中で複数の案件をこなしたり、さまざまなミーティングに駆り出されたりするため、実際の平均は、1日4時間強くらいしかかけていないのでは? という印象です。 ……となると、トータルでは12~20時間ほど、というところでしょうか。 やはり実務をしていて感じ

    LIGデザイナーの仕事の進め方やコツとは?質問にお答えします! | 株式会社LIG(リグ)|DX支援・システム開発・Web制作