『海外でWEBデザイナーになりたいんですが、どのくらい英語勉強したら良いですか？』みたいな質問は勿論かなり多いのですが、ぶっちゃけ言語に時間かけるくらいならスキルを磨いた方が良い気が…と言いたい時が大半な印象があります。言語なんて所詮そんなもんで英語だけ出来ても正直意味が無い。 勿論英語は頑張って勉強した方が良いんだと思いますが、個人的にはプライオリティは自分の専門分野が優先。 僕らはWEBデザインが仕事であって、作文が仕事では無いので、文章を書くのなんてテンプレで済ませるくらいで調度良い。英語なんて所詮僕らWEBデザイナーにとってはその程度の物で、テンプレでどうにもならない時に初めて学べば良いと思うわけです。完璧な英語から入らないと気がすまないという場合は、WEBデザイナーでは無く、学者さんとかになったらいかがかなと思います（笑） そんなわけで、今回もそんな現場で使われている英語を教えろ
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
2014年10月8日 SVG Webクリエイターボックスでちょこちょこ取り上げてきたSVG。今回は第四弾！SVGを使ったクリッピングマスクを紹介します。今までは画像に透過PNGを重ねてマスクを表現できましたが、高解像度ディスプレイに対応させたり、マスク自体に効果をつけるならSVGが便利かなーと思います。サムネイル画像にフレームをつけたり、デザインのアクセントとして使えるので、ぜひマスターしてくださいね！ ↑私が10年以上利用している会計ソフト！ SVGのクリッピングマスク基礎 1. 画像を用意 それではさっそく試してみましょう！まずは切り抜かれる画像を用意し、img タグで表示します。この時画像に mask というクラスを与えておきます。 <img class="mask" src="images/rose.jpg" alt="Rose"> 2. マスクの型を用意 Illustratorで
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
さっさと仕事を終えて帰宅に向かいたいWebデザイナーさんへ朗報ですよ！ Photoshopと合わせて使える便利機能を見つけたので紹介します。 Velositeyは、Webレイアウトを数回のクリックで完成できるPhotoshop用のプラグインです。例えば、以下のようなレイアウト。Photoshopを起動してから、わずか4回のクリックで完成です。 ワイヤーフレームにも使えますし、ここからさらに作り込んでWebデザインとして完成させることも可能ですね。 それでは実際に上のレイアウト作成にかかった『4クリック』を振り返ってみます。 著者情報：この記事を書いた人 ウェブさえ web業界14年目。フリーランスwebデザイナーとして活動後、法人化。今でも年間100件以上のウェブサイトの企画・制作に関わっています。 ウェブさえにできること【お仕事のご相談＞サービスメニュー】 Follow @websae2
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
東京ベイ潮見プリンスホテル ”水辺の宿場町”をデザインコンセプトとするアートホテル「東京ベイ潮見... 詳細を見る
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
こんにちは、トヨシです。Webサイトの納品後に 「それ見積もりに入れるの忘れてたー！」 というのはだれもが一度は経験したことがあるんじゃないでしょうか。以前は私もWeb制作に関わっており何度も経験が有ります。今回はそんな悲劇が二度と起きないようWeb制作（ホームページ制作）の見積もり時に忘れやすいけど忘れずに検討したい項目についてまとめました。 全体をホームページ制作前、制作中、制作後、その他の4つに分けて紹介します。 とその前に、 見積書の作成にお困りの方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」がおすすめです！レイアウト崩れや記入漏れの心配無用です！ [adrotate group=”3″] 制作開始前に必要な見積もり項目 企画・ディレクション費用 打ち合わせ、提案書の作成、アイデア、ノウハウ代など見積もりに含めることは多いです。 旧サーバからのデータ移管費用 サーバ
2010年にリリースされたIllustrator CS5でのWeb向けの機能強化以降、Web向けにIllustratorを使う上では、次のアプローチが基本とされてきました。 ドキュメントプロファイルに「Web」を選択し、［新規オブジェクトをピクセルグリッドに整合］にチェックを付ける ［ピクセルプレビュー］をオンにする 先週末に行われたdot-ai, Vol.2において、黒葛原 道さん（eater）が、次のアプローチを発表され、「なるほど！」と思ったのでご紹介します。 ［新規オブジェクトをピクセルグリッドに整合］はオフにする グリッドを1ピクセルに設定し、［グリッドにスナップ］をオンにする ［線の位置］は外側に設定する 次の図は、左が従来のもの。右側が黒葛原さん方式です。 Illustratorの「ピクセルグリッドに整合」は、3px x 3px、線幅1pxの図形を描画する際、ピクセルグリッド
久しぶりの更新となってしまいました。。。 先月の10月26日開催されたCSS Nite LP30に参加してきたので、この事について書こうと思います。 サブタイトルの「直視しない人が多いけど、軽視できない仕事とお金の話」通り、まさに「仕事とお金」の話をひたすら聞いた1日でした。 以下がセッション内容です。（敬称略） 仕事が生まれるメカニズム、ビジネスを継続していくチカラ 鷹野雅弘（スイッチ） デザイニング・バランスシート 〜中小企業が会社を育て、経営を安定させるためのお金との向き合い方 野田 純生（アルファサード） もうWebサイトは作らない。 中居 伊織（オフィスコンクリート） 1997年、27歳の時に起業した、アンティーというWeb制作会社の話 中川 直樹（アンティー・ファクトリー） お金は「稼ぐ」より「使う」?!〜感動のチームビルディングと未来への投資 志水 哲也（タービン・インタラク
＜目次＞ スマートフォンサイトは横幅320pxで作ろう！ スマートフォンの解像度は横幅320pxではない？ スマートフォンサイトでは画像を大きめにしよう スマートフォンサイトを作るときに必ず目にするのが『viewport』です。以下の記述をすることがスマートフォン対応の第一歩です。 <meta name=”viewport” content=”width=device-width> これは「サイトの横幅をデバイスの横幅に合わせます」という指定です。一般的なスマートフォンのデバイスの横幅は320pxになっています。なのでこの指定をしておくことでサイトを作成する際に横幅320pxを前提にレイアウトすることができるのです。 逆にこの指定をしていないとスマートフォンに最適化されていないPCサイトのように小さく表示されてしまいます。 参考：携帯サイトのスマートフォン対応のポイント！ ～スマートフォン
Web サイトをどうつくっていくのか。 ワークフローの最適化って難しいし、会社の個性が強く現れるところだと思うんだよね。 今日は深入りはしないで、見せ方の気に入ったワークフローを並べてみることにしました。 コンサルティング中心の会社も入ってますが。 キノトロープ 初期コンタクト 成功予測 戦略策定 戦術策定 制作・公開 更新・運用 効果測定 全体的に若い会社の多いこの業界の中では老舗（1993年創立）。 かっちりしていてある意味でお手本的。ワークフローの本も出してるしね、確か。 イージェーワークス 戦略 構築 運用 ISP系の会社だそうです。図がみやすい！プロモーションの設計〜実行を "明示的に"（他社も当然やってはいるけど）フローに入れてるところが特徴かな。 ビービット サイト戦略策定 サイト設計 デザイン / 制作 効果検証 ユーザビリティに強いことで有名な会社。ちなみに上の図は1.戦
ディレクトリマップとは、Webサイトを構成するすべてのページを書き出してまとめた一覧表のことです。ページリストと呼ばれることもあります。 ディレクトリマップでは、サイトマップによって決定したサイトの構造を元に、より詳細なページ単位の仕様を定義していきます。ディレクトリマップは、制作チームのメンバーにとって、実制作を進めていく上での拠りどころとなる重要な資料になりますので、慎重に作成しましょう。 ディレクトリマップで定義する内容 ディレクトリマップは、一般的に、ページ名称、ページID、ページの階層、ファイル名などの項目で構成されます。これらの内容は、サイトマップやワイヤーフレームなどの資料と連動して、各資料で示されているページがどのページなのかを簡単に紐づけられるように作成しなければなりません。 ほかにも、サイトの規模やプロジェクトによって、現行ページのURL（リニューアルの場合）、メタタグ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
どもナカムラです。 今回は、ディレクションにおいてかなり重要な位置にありながら、イマイチ深く語られない「コミュニケーション」の重要性とその把握方法について、ディレ協やゼロディレでも講師仲間としてご一緒させていただいている小嶋さんから寄稿をいただきました。初の寄稿記事っすね。 コミュニケーションが不足した現場で起こっていること はじめまして、小嶋です。 開発の現場で「コミュニケーション能力」を期待される事が多くありますが、実際に現場に入ると、ディレクターとほかのスタッフの間の会話がほとんどなく制作依頼のかなりの部分が丸投げになっているケースが多くあります。 当たり前ですが、そういった現場では出来上がるものが大抵よろしくないのです。 デザイナーからワイヤーに色を付けた程度で何のデザインもされてないモックが上がってきたり、エンジニアがシステムに組み込めないようなコードを組んでしまったり 嘘みたい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
