Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。 Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。
Web制作者がチェックしておきたい！デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ
Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。 Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。
Webフォントを滑らかに表示させるCSS 2016年版 IE 11/Edge/Chrome/Firefox（Windows）
目次 ブラウザーによってWebフォントの見え方が違う 各ブラウザーの実際の画面で見え方をチェック font-smooth -webkit-font-smoothing transform: rotate(0.001deg) text-shadow: 0 0 0.1px rgba(0,0,0,0.5) CSSを適用した状態で各ブラウザーの実際の画面でチェック このブログ内の関連ページ 参考にしたページ サンプル画面として使ったサイト この記事へのネットの反応まとめ ●ブラウザーによってWebフォントの見え方が違う 今更ですが、日本語のWebフォントを会社のサイトで使い始めました。 元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてし
「WEBサイトを作りたいけれど、お金がかかるから作れない。」そんな悩みをもっている方へ。小さな会社や個人がWEBサイトをつくるためにもらえる補助金の話。 | non-standard world株式会社
「WEBサイトを作りたいけれど、お金がかかるから作れない。」そんな悩みをもっている方へ。小さな会社や個人がWEBサイトをつくるためにもらえる補助金の話。 ※2017年7月、IT導入補助金について追記。 ※2018年7月、URLを最新のものに更新。 「WEBサイトを作りたいけれど、お金がかかるから作れない。」そんな悩みをもっている方に、ぜひお伝えしたいのが、小さな会社や個人がWEBサイトをつくるためにもらえる補助金について。今日はこれまで事例のあった補助金や情報収集方法についてご紹介したいと思います。 全国向けに配布している補助金 小規模事業者持続化補助金 URL：http://h29.jizokukahojokin.info この補助金は、小規模事業者が、商工会議所・商工会の助言等を受けて経営計画を作成し、その計画に沿って販路開拓に取り組む費用の2／3が補助されます。補助上限額は５０万円。
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
FacebookのOGPを作って下さいと言われた時に参考にする記事
Web担当者をしているとOGPが入ってない！！！ 急いで入れてください！と頼まれることがある。 そんな時にコピペで入れることが出来るように最低限必要なFacebookのOGPの設定を書いておきます。 コピペで使えるFacbeookOGP これをコピペして必要なurlや画像のurlを入れて下さい。また、適切なテキストを入れて下さい。 サンプル <meta property="og:locale" content="ja_JP" /> <meta property="og:image" content="OGPの画像イメージのurlをここに入れて下さい" /> <meta property="og:title" content="記事タイトルをここに入れて下さい" /> <meta property="og:type" content="article" /> <meta property="
深層Webで見つかった謎のホラーゲーム『Sad Satan』―作者や制作意図は一切不明 | Game*Spark - 国内・海外ゲーム情報サイト
今や当たり前の存在となっているインターネット。様々な情報を手軽に検索することができますが、中には検索エンジンでは見つけられない情報があり、それらは「深層Web」と呼ばれています。そんな深層Webの中で謎のホラーゲームが発見されました。 様々なホラーゲームのプレイ映像を配信しているYouTubeチャンネル「Obscure Horror Corner」は、チャンネル登録者からこのゲームの存在を知らされ、実際のゲームプレイ映像を公開しています。正式な名称が分からずファイル名から『Sad Satan』と呼ばれているこのホラーゲームは、不気味な道を歩き続けるだけという内容。クオリティ的にはかなり微妙ではあるものの、得体のしれない恐怖に満ち溢れています。 海外ドラマ「ハンニバル」のシーズン1からと思われるシーンや、英国NSPCC（全国児童虐待防止協会）の写真が差し込まれるなど、ヒントらしきものは散りば
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
コラム｜株式会社プロネクサスのweb制作部門レインボー・ジャパン
平日10：00〜19：00（土日祝日を除く）営業、パートナー応募のお問い合わせはお受けしておりません。
Webサービスの宣伝ツールをいろいろ使ってみた - 今日学んだこと
Webサービス作ってみた系の記事、よく見ますよね。僕もその一人だったりしますが作った後にどうプロモーションして良いかすごく悩む。 検索で自然と人が集まってくれればいいけど、立ち上がりはそうもいかない。 と、いうことで、僕が色々試行錯誤した結果を、使ったサービス含めて共有してみようかと思います。 参考：うちのサービスの流入経路の上の方たち。このブログからの流入がダントツです。 使ってみたサービスたち(流入上位から紹介) あ、お金払ってみたgoogle AdWordsは除いてます。こちらは上の画像にある通り、243のアクセスがありました。 1位：clafu 40アクセス Clafu - これでもアクセスが増えなかったらもう諦めよう！ ちょっと増えたから諦めない！こちら、どんなかというと、登録した人同士のTwitter使って同時刻に一斉告知をかけるサービスですね。 広告掲載して放置、ではなく、T
[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice
デモページ TTFB(Time to First Byte)やロード時間やリクエスト数などが表示され、数値はグリーンは良好、イエローは注意、レッドは超過となっています。 当ブログのパフォーマンスも表示させてみました。 Justiceのパネルの右上にあるボタンをクリックすると、非表示になります。 コリスでも試してみました。 対応ブラウザの明記はないのですが、Chromeでは全部表示され、Safariでは一部ダメでした。 Justice.jsの使い方 使い方は、2通り。 Webページに直接埋め込む 外部スクリプトとして記述することで、Webページで利用できます。 <script type="text/javascript" src="justice.min.js"></script> <script type="text/javascript"> Justice.init(); </scrip
![[JS]Webページのパフォーマンスをかっこいいストリーミングのグラフで表示できるスクリプト -Justice](https://cdn-ak-scissors.b.st-hatena.com/image/square/67c41fbe6bd86b8c62801bb7a2b6354c6e4a9391/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015062403.png)
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は適当です。ぜひ一度整理してみてください。 目次 Javascriptフレームワーク React.js Angular.js Angular.js 2.0 Backbone.js Vue.js Mithril.js Aurelia.js Knockout.js
表示速度が改善するプラグイン「Photon」
僕はずっとWordPressの表示を速くするためにずっと、 「CloudFlare」を利用していました。 CloudFlareとは？ Webサーバー上のコンテンツの中でキャッシュが出来るファイル（画像,CSS等）をCloudFlare上のサーバーにキャッシュする事でWebサーバーのレスポンスを改善する、CDN（コンテンツデリバリネットワーク）サービスです。 凄くザックリ言うと、画像を軽く表示するよ！ってサービスですね。 http://jp.cloudflare.com/ つい先日、急にサイトが表示されない不具合に見舞われまして、 「うわ、参ったなぁ。」とアレコレしていると、 優しいフォロワーさんが「CloudFlareがエラーになってますよ。」と。 We have re-routed DNS traffic away from Hong Kong and Tokyo. Customers
世界が注目している！クリエイティブがすごい日本のWeb制作会社・クリエイター集団のまとめ
同じWeb制作者としてよいインスピレーションを受けるだけでなく、一緒に作ってみたいと思ったり、クライアントとして声をかけたくなるような注目しておきたい魅力的なWeb制作会社・クリエイター集団を紹介します。 そのクリエイティブなアイデア、クリエイティブなデザイン、クリエイティブなインタラクション、創造力をかきたてます！ 世界中のかっこいいWebサイトをピックアップするAWWARDSのブログで日本の制作会社が特集されていたので、実績サイトと合わせて紹介します。 A Look at Japanese Web Design いくつかの会社では人材募集をしているので、気になった人は門を叩いてみるのもいいと思います！ 株式会社 STARRYWORKS 昔からの伝統的な技能と新しいテクノロジー、どちらも理解した上でのもの作りにこだわった大阪の制作会社。「アシタノシカク」はCanvasを使って四角がうねう
What’s Trending in Type · Typewolf
Flawless Typography Checklist A typography master course that doubles as an interactive visual reference that helps you achieve flawless type on every design project
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Design
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
【総まとめ】2015年に話題になったイケてるWebサービス・アプリ27選 | creive【クリーブ】
Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた | 初代編集長ブログ―安田英久
WordPressデザインの3つの変更方法とテーマ11選を紹介
