ブラウザ確認が一瞬！ Browsersync入門（＋Gulpの利用方法） - ICS MEDIA
ウェブサイトを閲覧するユーザーの環境は多岐に渡ります。したがって、ウェブ制作者は多くの環境の動作確認をしなければなりません。その時の手間を大きく省いてくれるBrowsersyncというツールを紹介します。 Browsersyncとはファイル変更を監視し、自動でブラウザリロードを行ってくれるツールです。ローカルサーバーも起動できたり、複数のブラウザで操作の同期が可能といった便利機能も満載です。 Browsersyncのデモ動画 Browsersyncのデモ動画を紹介します。デスクトップブラウザとスマートフォン（iPhone）のブラウザが同期しており、ファイルの編集後に自動リロードしています。CSSでハリネズミを走らせるアニメーションです。HTMLやCSSのファイル編集がリアルタイムに反映されていることがわかります。 Browsersyncは何を便利にしてくれるのか ファイルの編集後に複数ブラ
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、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
数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWebディレクターの日常
なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて面倒くさくなってきて激しく後悔したびっくりしたという。 ぼくはWebディレクターでありデザイナーさんではないし、すてきデザインができるようなビジュアルセンスのようなものは、誠に残念ながら母上から授けられずにこの世に生を受けているものですから、"いわゆる"デザインはやらないんですが、その前の画面設計についてはワイヤーフレームなるものでいっつもやっておりますので、その観点からなんか書きましょうとそういうことですお母様（謎） そんなわけで、うぇぶぎょうかいのむめいでぃれくたーのお時間です。 Webディレクターとしてはえーと、もうすぐ丸１２年になります。そうするとまあ、たぶん数千ページは「ワイヤーフレーム」をつくってきたんじゃないかと思います。正確な数字はわかんないです
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
高級感あるWebサイトをデザインするときに参考になるサイトと、7つのコツまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まきこです。好きなハロプロの秋曲は「ハピネス～幸福歓迎！」です！ さて今回は、「Webサイトの高級感ってどうやったら表現できるの？」という課題について考えてみます。デザイナーとして仕事をする上で、「もっと高級感がほしい」というオーダーは多いんです。そんなときでも迷わず解決に向かってひた走れたら、デザイナーとしても高級になれるはず！ ということで、わたしが個人的に「高級感がある」と感じたサイトを、その高級感を醸成している理由ごとにご紹介していきます。 1. クオリティーの高い写真 オークヴィレッジ木造建築研究所 https://www.oakv.co.jp/kenchiku/ 木造建築を専門とする建築事務所のサイトです。まるで写真に使われている家で暮らしているかのような気持ちになる、臨場感あふれる写真がトップページに大きく使われています。 Equipos de Aire Acon
最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。 Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
【2016年上半期】ウェブデザイナーが注目したい、本当に流行中のWebデザイントレンド5つ
Medium で公開された「5 Actual Web Designs Trends for 2016」 by Nils Sköldの許可をもらい、日本語抄訳しています。 This article is translated from Medium (https://medium.com/). 「いつの間にか気付いたら、2016年も半分を過ぎていた。」そんなひとも少なくないかもしれません。今回は上半期の総集編として、ウェブデザイナーが押さえておきたい、実際に流行っているWebデザイントレンド5つを、サンプル実例サイトと一緒に見ていきましょう。 01. フルスクリーン表示 + スクロールなし。 スクロールしないウェブデザインが、いよいよ人気となりはじめているようです。ヘッダーの一番上にアンカーリンクを固定し、下方向にスクロールを促す単一ページのウェブサイトは、ホームページ作成のスタンダードと言
新人Webデザイナーが知っておくべきWebデザイン専門用語30選
Web業界に入ってまず苦戦するのが専門用語の多さです。これからWebデザイナーとしてお仕事をする新社会人の方は、こうした専門用語を入社前にきちんと覚えておくと良いスタートを切れるのではないでしょうか。 そこで今回は、新人のWebデザイナーが知っておきたい専門用語をご紹介します。 すでに聞いたことのある用語でも、なんとなくのニュアンスで使っていないかチェックしてみてくださいね。 概念 UI 「ユーザーインターフェース（User Interface）」の略で、ユーザーがコンピュータなどのIT・デジタル機器/システムと情報のやりとりをするための仕組みや操作感のことです。ユーザーの目に触れる部分や使用する部分はすべてUIといえます。 「ユーザーエクスペリエンス（User Experience）」の略で、ユーザーがある製品・サービスを通じて得られる体験を意味します。その体験によってユーザーが抱く感情
Webデザインが圧倒的に捗るGoogle Chromeの拡張機能12選
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
2015年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
2015年、当サイトで公開した記事の中からPocketにたくさん登録された記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 コリス Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, Illustrator, Sketchなどの使いこなし術 フォント・タイポグラフィ カラー HTML CSS JavaScript WordPress, Bootstrap 無料素材 便利ツール・サービス その他 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望 2015年これからのWeb制作業界の流れ、伸ばしてお
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 | HTML5でサイトをつくろう
Webサイトやモバイルサイトのワイヤーフレームがたくさん！でレイアウト作りの参考に役立つ「UI TITES」と「UXKITS」 最近、自分の中でWebサイトの参考としてPinterestがとても便利で毎日みてるのですが、かっこよいサイトの他にレイアウトの例としてUIやUXに特化したボードなどもありチェックしています。 そんな時見つけた、Webサイトやスマホサイトを画面構成を作る際にたくさんのモジュールが用意されている「UI TITES」と「UX KITS」がシンプルだけですが組み合わせによって色々なレイアウトが作れるのでとても参考になりますので紹介します。 http://pixelbuddha.net/ui-tiles/ こちらは72個もモジュールがあり無料でダウンロードができます。 PHOTOSHOPデータやイラレデータがありますので、個々のモジュールを組み合わせてWebサイトのワイヤー
リモートWeb開発者ツール「Vorlon.JS」
リモートWeb開発者ツール「Vorlon.JS」 2015-11-18 Web開発者ツールといえば、ブラウザに付属されている開発ツールやFirebug、Dragonflyなどを思い浮かべる方が多いでしょう。これらの開発ツールはブラウザに大きく依存しています。 今回紹介するのは、プラットフォームに依存しないリモートWeb開発者ツール「Vorlon.JS」です。 Vorlon.JSについて Vorlon.JSは、Microsoftが開発しているオープンソースプロジェクトです。node.jsとsocket.ioが利用されています。 このツールは、ChromeのDevToolsなどと同様にDOMやネットワークなどの情報を確認するための開発ツールです。 Vorlon.JSの特徴は、ブラウザ上で開発ツールが動作します。そのためブラウザやOSに依存することなく、1つの開発ツールの画面から複数の閲覧環境を
企画・提案・見積・納品・契約などのテンプレ・知識まとめ２３ | コムテブログ
TL;DR クライアントさんとの打ち合わせや会議の後は、必ず議事録を書いて社内共有します。座った位置や発言なども、思い出しながら簡潔に書きます。おかげで「何を話したっけ？」「言った、言わない」を防げてます。フリーランスの人は、見積書、請求書、契約書、法律などのテンプレや知識があると、スムーズに先へ進めます。その他、ヒアリングシート、契約書など Web 制作業でリアルで必要だった書類系テンプレや知識をまとめました。 企画／提案 １．企画書 企画書はどれくらいのコストで効果（売上）を得るかというのが一番大切。とはいえ、上司を説得できる企画書も大切。以下は企画書の作り方と資料作成サービスなどのまとめです。 [保存版] 最強の企画書の作り方と資料作成サービス完全まとめ | 世界ろぐ “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座#1 | Web 担当者 Forum ２．提案書 提案
Web屋が使う３４個の「シンプル・簡単・便利」なウェブツールまとめ
作成：2012/10/29 更新：2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか？そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の２つご覧ください。（※ 2015/06/25 2015/06/28追記） Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました
ランディングページの作り方、７つの超重要ポイント。
ランディングページ（ＬＰ）の作り方を、超重要ポイント７つに絞って説明します。対象読者は、これからＬＰを作成する方です。インハウスのご担当者だけでなく、制作会社さんが読んでも役立つでしょう。作り方だけでなく、コンバージョン率をアップさせる点も、詳しく解説したからです。１回読んで分からなければ、繰り返し読んでください。それだけ価値ある内容になっています。 ランディングページの構成。 まず最初に、ランディングページの構成について、左図を使って説明します。ランディングページの構成は、大きく７つのブロックに分かれます。 キャッチコピー。 お客さんの関心事を、ズバリ指摘します。関心事とは、対象ユーザーが抱える、悩みや課題です。このパートは、メインコピー（１行）とサブコピー（２行）、写真の３つの部分で構成されます。 共感部。 なぜ多くの人が関心を持つのか？ お客さんの気持ちに寄り添いながら、言葉で解きほ
Pinegrow Web Editor | Website Builder for Professionals
Pinegrow WP - Web Editor with WordPress Theme Builder a desktop HTML editor with support for Bootstrap, Foundation and other frameworks that lets you visually build WordPress themes and convert static HTML websites to WordPress themes. Watch video » * Also works without Bootstrap Pinegrow WP is an extended edition of Pinegrow Web Editor. It has all the features of Pinegrow Web Editor, plus the one
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
「Web制作のリアルな工数と見積もりの話」の話をしようじゃないか！
raf00がWEB制作の見積もりについて書きたいなぁとか言いながら1年半が経ちました。 で、いずれ書かなきゃなーと思いながら過ごしていたら、WP-Dさんが非常に興味深いエントリを上げられていましたので、これに便乗する形であれこれ書きちらしてみたいと思います。 WordPressのリアルな工数と見積もりの話をしようじゃないか！ | WP-D ウェブ制作の見積もりを金額付きで晒してやろうじゃないか！ | WP-D ■あの見積もりは妥当か否か なかなかブコメなどの反応が興味深い見積もりサンプルですが、現在の（上場企業の制作業務に対応できるくらいには）真っ当なWEB制作会社が企業向けに出す見積もりとしては項目・工数・価格的には概ね妥当かつ適切だなと感じられます。サンプルであるがためにこまごまとボヤけた点はあるものの、WEB制作会社のプロデューサー・ディレクターやクライアント企業のWEB担当者ならば
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://e-algorithm.xyz/vulnerability/
http://www.north-geek.com/entry/programming-rookie
