タグ

WEB制作に関するesenseのブックマーク (37)

  • TechCrunch | Startup and Technology News

    The company is in the process of building a gigawatt-scale factory in Kentucky to produce its nickel-hydrogen batteries.

    TechCrunch | Startup and Technology News
  • ユーザビリティの高め方7選 デザイン会社 ビートラックス: ブログ

    デバイスがパソコンからモバイルへ、そしてウェブからアプリの時代へ移り変わっていくとしてもユーザビリティとは常に変わらず求められるものである。そしてユーザービリティはそのサービスが提供する価値に大きな影響を持っている。 例えば、ECサイトを考えてみるとユーザビリティが直接購買意欲につながるわけではないが、商品購入までの過程をスムーズにおこなうことができたら、ロイヤリティーの高い顧客を増やすことが出来る。ユーザビリティはその全てのフローに関わるものである。 それではユーザービリティが高いサービスとはどのようなものだろうか?学術的な分野でユーザビリティの権威とも言われるJakob Nielsen博士はユーザビリティの高いインターフェイスは以下の5つのポイントを兼ね備えていると述べている。 学習しやすさ : システムは、ユーザがそれをすぐ使い始められるよう、簡単に学習できるようにしなければならない

    ユーザビリティの高め方7選 デザイン会社 ビートラックス: ブログ
  • ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP

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

    ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
  • 2015年 Webディレクターに必須な11個のスキルまとめ | Web担当者Forum

    はじめまして。katharsisの丸山純一郎と申します。 1998年頃からWeb制作にたずさわっております。 長年、ディレクターをしていますが、ディレクターに求められるスキルというのは年々増えていると感じます。 またWeb制作プロダクション以外の社内でのWeb担当者においてもディレクションスキルが必要な場面も多いかと思います。 ここに書く以外にも求められる能力はありますが、今現在何に手をつけていいかわからないという方は是非参考にしていただければと思います。 また制作を専門に行ってる方はディレクターは普段何をしているのかを知っていただければと思います。 新年年明けということもあり、Webディレクターが身につけておきたいスキルについてまとめてみました。2015にちなんで2015のスキルにしようかとも思いましたが11個にしぼりましたので是非お読みください。健康管理や社会人としてのマナーは含まれて

    2015年 Webディレクターに必須な11個のスキルまとめ | Web担当者Forum
  • Webクリエイターボックスの2014年を振り返る

    2016年12月26日 Web関連記事, お知らせ 今年も残りあとわずか!一年間お世話になりました!Webクリエイターボックスも間もなく5周年です!毎年思いますが早いですねー。という事で例年どおり、Webクリエイターボックス内でよく読んでもらった記事トップ10などを紹介しようと思います。いくつ覚えていただけてますかね? :3 ↑私が10年以上利用している会計ソフト! Webクリエイターボックス〇〇年振り返る記事シリーズ 2010年 2011年 2012年 2013年 2014年 2015年 アクセスの多かった記事 トップ10 今年書いたものでアクセスの多かったものトップ10。 1. かわいい系デザインに使えるフォントや素材、デザインアイデアを集めました 男性が苦手としがちなかわいい系デザインに使える素材やフォント、配色、実例サイトなどを紹介。きゃわわ。 この記事をRTする 2. 背景に動画

    Webクリエイターボックスの2014年を振り返る
  • ウェブデザインのセンスを磨こう! 2014年洗練されたディテールのUIデザインのまとめ

    2014年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2014年を振り返りつつ、来年はどんな素敵なデザインが生まれるのか楽しみですね。 GIF for the Weather App まずはUIの動きも楽しめるシリーズ。リンク先ではGIFアニメーションで動いています。 お天気アプリのコンセプトで、一日の天気をアコーディオン型のパネルで楽しく見せます。

    ウェブデザインのセンスを磨こう! 2014年洗練されたディテールのUIデザインのまとめ
  • 綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ

    作成:2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー 1.スライドを立体的に切り替え 2.クリックで滑らかにページ遷移させる 3.背景にスライド、フルスクリーンで固定させる 4.横に移動するフルスクリーンスライド 5.キューブ系のスライドを表示 6.下方向へドラッグするとページを再読み込みする 7.要素を上下にフワフワ動かす 8.外部要素をクリックで表示 9.タイピングエフェクト 動作 10.サーチボックスを画面全体にオーバーレイさせる 11.デイトピッカー 12.ドラッグ&ドロップ 画像をアップロードする

    綺麗な動きになった!Web制作前に見ておきたいjQueryプラグインまとめ
  • ラクするWeb制作「CSSフレームワークなにソレ?」な初心者へおすすめ7個

    注:今回の記事は初心者向け、Web制作を効率化&スピードアップしてくれる「便利なHTMLCSSフレームワーク」の紹介です。 CSSフレームワークとは? 2021年のおすすめCSSフレームワーク7個 CSSフレームワークの選び方 上の3点をお伝えしていきます。 それなのに、なぜ、カレーの画像で始まるの? その理由は、「CSSフレームワークって何?」を知ると理解できます。 著者情報:この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談>サービスメニュー】 Follow @websae2012 CSSフレームワークって何? CSSフレームワークは、言い方を変えれば「カレーのルー」と例えられます。 ある女は言った 女は言葉を続ける。 「当に

    ラクするWeb制作「CSSフレームワークなにソレ?」な初心者へおすすめ7個
  • http://syuukyaku-web.com/webdesign-syuukyaku.html

    http://syuukyaku-web.com/webdesign-syuukyaku.html
  • http://syuukyaku-web.com/?p=1238

  • ユーザーの心に響くWebデザイン 5つのテクニックとそれぞれの実例 - digihows.com

    参照:Leo Chuối ユーザー目線のデザインてどんなものだろう、と考えていた所、海外Webデザイン研究サイト"onextrapixel.com"から面白い記事を見つけましたので、以下に翻訳してご紹介します。 (参照:Why Designers Should Design to Incite Emotions) ユーザーの心に響くウェブデザインとは ユーザーをひきつけるウェブサイト 感情を動かす・心に響くデザインの実現は、Webサイトの訪問者に格別なユーザーエクスペリエンスをもたらす最もパワフルな方法です。数年前までは、Webデザイナー達が気を払うべきは幾分か基礎的な事で済みました。例えばデザインをスタンダードなWebサイトに寄せて行くとか、明快なナビゲーションを付けるとか、適切なレイアウトやフォントを選択するといったことです。 広がるWebデザイナーの役割 しかし、現在ではWebデザ

    ユーザーの心に響くWebデザイン 5つのテクニックとそれぞれの実例 - digihows.com
  • 第20回リクリセミナー「Webディレクターの頭の中」に参加したよ。 | よしぱんblog

    公開日:2014-10-29 最終更新日:2017-10-12 先週末は久しぶりにWeb系のセミナーに参加しました、しかも2日続けて!すっごく勉強になったし、三次元で沢山の方にお会いすることも久しぶりだったので刺激いっぱいの週末でした。絶賛知恵熱@よしぱんです。 では、2014年10月25日(土)に開催された第20回リクリセミナー「Webディレクターの頭の中」の記録を…書き始めたらどんどん長くなってしまって、2晩かかってしまいました。 月曜日に書きながら、このお二方はもうUPしてはるだろうなと思って覗いてみたらやっぱり上がってました。早い! 第20回リクリセミナー「Webディレクターの頭の中」 に参加してきました。|ふにろぐ …なんと分かりやすくまとまっているのでしょう!!当日の内容が知りたい方はみんなふにろぐ見に行ってください!第20回リクリセミナー「Webディレクターの頭の中」の後に続

    第20回リクリセミナー「Webディレクターの頭の中」に参加したよ。 | よしぱんblog
  • 大きな背景画像を使った魅力的なWebサイトを作ろう

    2014年9月9日 CSS, Webデザイン 以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します! ↑私が10年以上利用している会計ソフト! 背景に大きな画像を使うメリット・デメリット 大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。 しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

    大きな背景画像を使った魅力的なWebサイトを作ろう
  • Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive

    デモページ Responsive(レスポンシブ) Adaptive(アダプティブ) Liquid(リキッド) Static(スタティック) Responsive(レスポンシブ) レスポンシブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。一見するとリキッドのように見えますが、表示サイズに応じて要素の幅のサイズやレイアウトが変化します。 デバイスごとに合わせた一種のリキッドレイアウトであると考えることもできます。 Liquidapsive: Responsive Adaptive(アダプティブ) アダプティブは、デスクトップ・スマホ・タブレットなど異なる解像度ごとにレイアウトを定義するのが特徴です。レスポンシブとは異なり、単にレイアウトを変えるだけではありません。ユーザーのコンテクスト(環境・状況・目的など)に応じて表示するコンテンツ(レイアウト)

    Webデザインの代表的な4つのレイアウト、その特徴と相違点 -Liquidapsive
  • http://syuukyaku-web.com/wordpressdouga.html

    http://syuukyaku-web.com/wordpressdouga.html
  • 2014年8月の、これだけは押さえておきたいWeb関連の動き

    「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 デザイン関係 コーディングを考慮したWebデザインガイドライン Webデザイン用の Photoshop の基設定、1px 未満のにじみを発生させない、共通モジュールの外部ファイル化など、コーディングしやすいWebデザインカンプを Photoshop で制作する方法について。 Photoshopでバナー “いい感じ” に制作せよ! Photoshop でバナーを作る時の環境設定やテキストツールの使い方など。 このブログの [Webデザイン] 文字組みについて気出して考えてみた も紹介されていました。 DTP→Webデザイナー転向時に、これやったら捗ったよリスト13 | 279-design DTP(

    2014年8月の、これだけは押さえておきたいWeb関連の動き
  • 正式版リリース間近!Web制作の作業が驚くほど捗る『Avocode』最速レビュー

    PNG Hat, CSS Hatなど、Web制作に役立つツールを数多く開発しているMadeBySourceが新たにリリースする『Avocode』の正式版のリリースがいよいよ間近になりました! 一足先にプレオーダー版が届いたので、さっそくレビューします。 ベータ版の機能が限定されている時でも「こいつはすげえ」と思ってましたが、現在の最新版は更にヤバイです。 Avocode と、レビューの前にお得な情報を。 Avocodeはリリース前の早期割引として、キャンペーンを行っています。 通常$240が、約70%オフの$69で購入できます。 Avocode: 特徴ページ Avocodeは、Photoshop無しでPSDのプレビューができ、画像の書き出しは.png, .jpgだけでなく、SVGへの書き出しにも対応しています。また、ボタンやエレメントなどのベクターオブジェクトはCSS(Less, Sass

    正式版リリース間近!Web制作の作業が驚くほど捗る『Avocode』最速レビュー
  • Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ

    先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Adobe Photoshop Keyboard Shortcuts Photoshop 5-7, CS1-4, CCまで、Win/Mac用のキーボードショートカットがそれぞれPDFでダウンロードできます。 また、ショートカットがない便利な操作にショートカットを割り当てたショートカットファイルもダウンロードできます(チートシートでは「c」がついています)。

    Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ
  • Webクリエイターボックスを(プチ)リニューアルしました

    2014年8月19日 お知らせ 約2年半ぶりにWebクリエイターボックスのテーマをリニューアル!という事で、変更点をザックリと紹介します。とは言え全体のデザイン自体はあまり変わっておらず、細かいところや内部の修正・更新がメインとなっています。ちなみにブラウザーはChrome, Safari, Firefoxの最新版、IE11対応。Webクリエイターボックスに訪問するユーザーで、IE10以下を利用の割合は1.5%をきっていたのでバッサリ捨ててます。古いブラウザーを利用の方はアップデートしましょう ;) ↑私が10年以上利用している会計ソフト! SVG画像 背景やアイコンなどで使うデザインパーツの画像をSVGに変更しました。レティナディスプレイのMacに変えてからというもの、どうも画像のギザギザが目についてしまって。リデザイン前のテーマでも一部SVGを使っていましたが、今回総入れ替えしました。

    Webクリエイターボックスを(プチ)リニューアルしました
  • これからのWebデザインはIllustrator派が増えてくるのでは? | 5 LOG

    個人的に、今はWebデザインはイラレでやります。Photoshopは画像の調整にしか使いません。 これからは、徐々にDesigning in the browserにシフトして、ワイヤー、ラフ、パーツ制作にイラレを使用していくつもりです。 ただ、まだまだデザインカンプの作成が必須となっていて、なかなかシフト出来ないのが現状です。 なぜIllustratorか? そもそもイラレの方がレイアウトが組みやすい。 これが一番の理由なんですが。。。 いや、これ以外にも、いろいろとあって、 以前は、とにかく画像画像だったパーツ(ナビゲーションとかボタンとか見出しとか)が、CSS3で表現出来るようになり、Webフォントやアイコンフォントが主流になってきて、画像で書き出すパーツが大幅に減った。 さらに、Retina等、解像度の違うディスプレイが登場して、今後も増えてくる事を考えるとSVGの使用も増えてくる

    これからのWebデザインはIllustrator派が増えてくるのでは? | 5 LOG