フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
無料でアニメーションバナーも作れる超有能ツール！Google Web Designerの基本｜アナグラム株式会社
皆さんはバナー作成の際、どのようなツールを使用していますか？PhotoshopやIllustrator等の有料のグラフィックデザインソフトは、社内に導入していないケースやデザインの技術がなく利用していない人も多いのではないでしょうか。 フリー素材サイトでダウンロードした画像をリサイズし入稿するのも良いですが、テキストを一文加えるだけで印象が変わり、アニメーションを加えることで広告をより目立たせることができます。 2016年6月にFlash形式のディスプレイ広告がGoogle アドワーズへアップロードできなくなり、2017年1月以降Flash形式のディスプレイ広告が廃止されました。Flash形式と同じく動きのある広告は、HTML5広告を利用することが推奨されています。Google Web Designerでは工数もかけずにGoogle ディスプレイネットワークキャンペーン向けのHTML5広告
2017年11月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン Adobe XD 11月アップデートリリース！デザインスペック追加で開発者への受け渡しをもっと簡単に #AdobeXD | Adobe Creative Station デザインスペックはAdobe MAXでも話題になっていましたね。かなり期待されている機能だと思います。 もっと楽するweb制作！Illustrator & Photoshop 動画解説 – のんびりデザインしているような。 Adobe MAXでの北村さんのセッションの動画や補足がまとめられています。 知財教材「デザイナーが身につけておくべき知財の基本」 | 経済産業省 特許庁 デザインと知的財産権などについてまとめられ
伝言ゲームをなくしてデザインの質を高める！Adobe XDを使ったライブデザインのコツ
243 Screens, Last modified on Nov 27, 2017 12:42 GMT
【Udemyキャンペーン中！】Webデザイン・プログラミング他おすすめのスキル・講義動画まとめ - Life is colourful.
オンライン学習サイトUdemy（ユーデミー）が格安セールを行っているので情報をシェア。 最大95％OFFにもなっている講座もあるので、WebデザインやプログラミングなどのITスキル、その他、新しい技術を身につけたい人はチェックしてみる価値はあると思う。 セールの前にUdemyってどうなの？ってことだけど、正直なところ講座の質はピンキリ。各講座のユーザー評価やサンプル講座があるので、それらを確認してから受講するのがいい。特に、受講者が多くて評価の高いもの、特に「ベストセラー」認定されているものはほぼ間違いない。 【当サイト限定キャンペーン】 Udemyより当サイト限定特典をいただきました。 当サイトよりUdemyに新規登録された方に、5ドル（約550円）分のクレジットをプレゼント。動画コース購入時に使用できます。興味ある方は以下よりご登録いただけるとキャンペーンが適用されます。ただし先着10
Web制作現場でのノウハウや実務のポイントが学べるスライド11選
これからWeb制作に関する仕事に就こうと考えている方の中には、具体的にどのような業務を行うのか調べている段階という方もいるはずです。Web制作の現場では、Webデザイナー、コーダー、エンジニア、Webディレクターなど様々な職種のメンバーが連携を行うのが一般的です。 Web制作の現場においてメンバー間での業務を円滑に進めるために、自身がどういった職種に就くのか関係なく、それぞれ分野ごとの業務への理解を深める必要があります。 とはいえ、全ての業務の知見を短期間で身につけるのは難しいでしょう。そこで活用できるのが、「SlideShare」です。 今回は、SlideShareから、Web制作現場でのノウハウや実務を進める上でのポイントが学べるスライドをまとめました。 Web制作現場でのノウハウや実務のポイントが学べるスライド11選 1.イマドキWebメディアの制作手法 Webメディアはコンテンツ内
Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
ウェブデザインを独学で勉強するなら、初心者におすすめの本5選｜レスポンシブ /jQuery/HTML・CSS - 元『企業戦士』の1日1歩ブログ ~素晴らしき日常~
更新日：2018年03月05日 2017年04月からブログをはじめました。それまでブログはおろかSNSもしてこなかった筆者が当ブログを通じて、ウェブデザインにハマり、実際に独学で勉強してきました。 今回は、筆者が実際に読んできた中で、最初に学ぶ上で比較的読みやすいおすすめ本をご紹介致します。 筆者は全くのウェブデザイン知識ゼロのサラリーマン ウェブデザインを勉強するなら基本的な用語から コードを見ても拒否反応をしないこと 今回ご紹介する本のおすすめの方 ウェブデザインを独学で勉強するなら、おすすめしたい本 1．HTML5&CSS3デザインブック 1-1.概要 1-2.購入理由 2．レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック 2-1.概要 2-2.購入理由 3．Web制作の現場で使うjQueryデザイン入門 3-1.概要 3-2.購入理由 4．HTML5&CSS3マ
Webサイトデザインの横幅サイズ！もう何pxか迷わない！ 2017年1月版
こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
Webデザインでよく使うUI要素の名称・用語一覧 - Qiita
Overview Webサイトを作っているとよく出てくるUIの名称を、ざっくばらんにまとめました。 人や会社ごとで固有の呼び方があると思いますが、私の場合こんな感じです。 コミュニケーション円滑にな〜れ ※2016/11/28 はてブコメントなど参照させていただき、少し更新しました。 ポップアップ表示系 ▼ アラート JSのalertかブラウザのデフォルト機能で出るやつ。ダイアログとも。 ▼ モーダル・モーダルウィンドウ 閲覧中のページにカバーを重ねて表示させるやつ。 modalは「このページはいま入力モードだぜ」といった意味合いでmodeを形容詞化したことば。 ▼ ツールチップ・ポップアップ表示 マウスオーバーすると吹き出しとかで表示されるUI。 補足説明などで使用されることが多い。 ▼ ポップアップウィンドウ 閲覧中のウィンドウとは別に、勝手に立ち上がるウィンドウ。 スパイウェアなどの
Web制作会社に入社して約３ヶ月、現在の心境を語りますヽ(・∀・)ﾉ - Love＆Peace
ウェブ制作会社に採用されて早くも３ヶ月が経っておりました(^^;)月日が流れるのは早いものです!!! 実際に採用された時に書いたのがこちらの記事です。 www.love-wd-yuka.com 仕事にもだいぶ慣れてきて、ようやく落ち着いてきたところなんですが・・・！私にとっては次なる課題が待ち構えております！ それは・・・ウェブサイトのデザイン！をすることです(^^)私が目指しているウェブデザイナーにやっと一歩近づける、重要なターニングポイントなのです!!!デザインを任されたという事は、今の仕事にもだいぶ慣れてきたからなんだと思います。（と、勝手に思っていますw）でもうちの会社はやる気があれば、なんでもチャレンジさせてくれる環境なので、私にとってはとてもありがたいです！今回は二つ返事で「やってみたい！やります！」と言ってしまいましたが(^^;) 案件の内容は、とある企業のホームページなので
web未経験のママがwebデザイナーになった方法とおすすめの本やサイト - みすずママブログ
産後２ヶ月から育児しながらwebデザインを勉強し始め、その６ヶ月後には初めての仕事を受注しました。 まったく知らなかったweb業界。デザインも未経験。 そんなまったくの０からでも、webデザイナーとして仕事ができるようになりました。 webデザインを覚えると、webの面白さを知るだけでなく、作りたいサイトを自分で作って発信することもできるし、さまざまな業界のことを知ることもできます。 そしてwebデザインは 主婦やママにぴったりの仕事 だと思うのです。 なぜなら時間や場所にとらわれずにいつでもどこでも仕事ができるから。 家事や育児の隙間時間に、パソコンたった一台でネット環境さえ整っていれば仕事ができてしまいます。 そしてもう一つ。 英語が必要とされてきたように、 これからはプログラミングができると強い ということ。 ［ママとパパのための］こどもプログラミング読本 という本で脳科学の茂木健一
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://handywebdesign.net/2017/10/beautiful-svg-animation/
コーダーの仕事が楽になる！レスポンシブ対応のさまざまなHTMLテンプレートが驚くほど簡単に作成できる -Aperitif
2016年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
https://geechs-magazine.com/tag/tech/20170227_2
org-rabo.com