【フロントエンド】新規 Web アプリケーション開発案件をふりかえってみた | PSYENCE:MEDIA
4 ヶ月あまり続いた新規開発案件がようやく落ち着きを見せたので、ここらで振り返りをしてみたいとします1)リリースまでに巻き取れなかった不具合や未実装箇所が幾つか残っているので、まだ気持ち的には終われていないのですが…。 サービスのおおまかなアウトライン コンシューマ ( 一般ユーザー ) 向けサービス ブラウザで動く Web アプリケーション ワンソースによるレスポンシブレイアウト サポートするブラウザは IE9 以降や Android4.x 以降のモダンブラウザのみ Ruby on Rails 多言語対応あり SEO 対策はそれなりに必要 わりとフワッとしか要件が決まっていないままスタートしたので、TRY & ERROR を繰り返しながらの開発 すごく大雑把ですが、だいたいこんな感じの Web アプリケーションです。これを踏まえてフロントエンドをどのように開発していくかを設計していきまし
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
「Photoshopしか使えない」Webデザイナーとは、「お絵かき」「見た目」だけにこだわるデザイナーのことです。ビジュアルデザイン以外の付加価値がないデザイナーは今後は生き残ることは難しいです。 今ではWebサイトを作ることが当たり前になりました。 それどころかスマートフォンの普及でレスポンシブWebデザインで作るサイトも当たり前になっています。また、ASPでWebサイトを作るサービスも増えています。JIMDOなどが代表的な例でしょう。 普通に「Photoshopしか使えない」だけのデザイナーは、もう生き残れるのは難しいでしょう。
「Web制作時の考え方」に良い影響を与えるおすすめのTED動画まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 10月か11月頃から TED（Technology Entertainment Design）Talks に完全にハマっています。隣のデザイナーからは「回し者じゃないか」と言われたりします。 毎日パソコンの前に座ってインターネットをうろちょろしていても、結局は自分の知っている分野の知識を取り入れるくらいしかできないのですが、TEDを適当に漁っていると、そんな研究してる人いるの？っていうくらいマニアックな研究と出会うことができます。 油断して観始めた動画に某害虫の話が出てきた時は本当に後悔しましたが、研究の着想を得る対象は無限大だと学びました。涙 ということで、毎日いろんな分野の動画を観ている中で、Web制作時の考え方に良い影響を与えてくれるんじゃないかなあと感じた動画をいくつかご紹介したいと思います。 あなたの（そして何十億人の）ための巨大なウェブデザ
ファビコン favicon.ico を作ろう! リアルタイム 5サイズ版
このページでは 16x16, 24x24, 32x32, 48x48, 64x64 の5つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定可能です。 指定した大きさの画像がアイコン内に作成されます。 16x16の画像のみ作成する場合は16x16に画像を指定して下さい。 32x32の画像のみ作成する場合は32x32に画像を指定して下さい。 同時に複数画像を指定すると、マルチアイコンになります。 16x16と32x32に画像を同時に指定すると2サイズのマルチアイコンになります。 16x16,24x24,32x32,48x48,64x64すべてに同時に画像を指定すると、5サイズのマルチアイコンにな
[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋
次のプロジェクトでちょっと使ってみたくなる実用的なものから実験的なものまで、CodePenで多くのユーザーをうならせたスタイルシートのテクニックを紹介します。 まずはアニメーションが楽しいデモから。 ※上から10個くらいはアニメーションgifです。
![[CSS]チェックしておきたい、最近のスタイルシートのテクニックのまとめ -2014年秋](https://cdn-ak-scissors.b.st-hatena.com/image/square/d68594e0182d8d63cfb96eda05e4f18be75583c9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014091401-04.gif)
【保存版】Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ
Illustratorでウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テクニックを紹介します。 Speed Design with Illustrator Illustratorの時短チップスを書いたのはVincent Le Moign氏で、彼の別サイト「WEBALYS」ではたくさんのフリー素材を配布しているので覗いてみてください。 WEBALYS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。無断翻訳・まとめ記事の転載をしているあのブログの注意喚起を海外のブロガーから聞くのでご注意ください。 時短でボタンをつくる 1クリックでテキストをデザイン カラー変更の強い味方「グローバルカラー」 モジュール式のデザイン アイコンフォントを簡単に扱う方法 グリッドの設計 グリッドにスナップさせる アートボードの活用 サイ
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
メンテナブルCSS
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
Hex Color – The Code Side Of Color — Smashing Magazine
Name a color, and you’re most likely to give a misleading impression. But, when computers name a color, they use a so-called hexadecimal code that most humans gloss over: 24-bit colors. Don’t let the code intimidate you. With a little creativity, hex colors are a tool at your disposal. The trouble with a color’s name is that it never really is perceived as the exact same color to two different ind
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
君は3つのリロードを知っているか？ - os0x.blog
はい、今さら聞けないウェブ開発者の基礎知識のお時間です。 ブラウザには3つの読み込みモードがあることはご存知ですか？ 2つくらいはわかるけど、3つ目が出てこないって方は少なくないかもしれません。 リロード 一番オーソドックスなのがブラウザのリロードボタンを押したときの挙動ですね。普通ですね。 スーパーリロード ブラウザによっては、スーパーリロードという機能を備えています。IEの場合Ctrl+F5(Ctrl+更新ボタン)、Firefoxの場合Ctrl+F5(Shift+更新ボタン)、Chromeの場合Shift+更新ボタン(Ctrl+Shift+R)などでスーパーリロードを呼び出すことができます。スーパーですね。 ページ遷移(リフレッシュ) 3つ目はちょっと良い名前が思いつかないのですが、リロードではなく、通常の画面遷移での読み込みのことです。アドレスバーにフォーカスしてenterするといっ
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
これから身につけるWebサイト高速化テクニック一覧
New Content Available soon!
HugeDomains.com
http://designaholic.cc/2011/03/webweb21.html