HTMLコーダーにやめてほしい10のこと｜TechRacho by BPS株式会社
システム開発の際、デザインとHTMLコーディングは別会社で! 受け取ったHTMLの組み込みはお願いします! ということが結構あるのですが、その時もらったHTMLを見て、ここはやめてほしいという点をまとめて書いていこうと思います。 インデントがバラバラ プログラム書くときもそうですが、インデントがバラバラだと見づらいです。 ※弊社ではHTML/CSSともにインデントはスペース2つです。 タブ/スペースが混じっている インデントが崩れているときは大体、タブ/スペースが混じってますね。見づらいです。 ※弊社ではタブは使わないようにしています。 JSが意図した動作になっていない/動かない JSまで対応となっているにもかかわらず、動かないというのは論外ですね。 「JSが意図した動作になっていない」これも結構ありました。 例 全選択/全解除というところをチェックすると、下にある項目が全部選択されるとこ
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
【保存版】完全無料の矢印ベクターデザイン素材、350個あつめました。
Webサイトでもよく利用されている、矢印をモチーフにしたデザイン素材。 手書きでスケッチされたものや、くるっとカーブしたもの、クラシックなスタイルなど「矢印」といっても形も種類もさまざまです。 海外デザインブログVectortuts+で、あらゆる矢印ベクターデザインを350個まとめたエントリー「350+ Free Graphics: Vector Arrow Symbols and Shapes」が公開されていたので、今回はご紹介します。 詳細は以下から。 自由自在に編集できるベクター素材 Illustratorで編集可能なAi、EPSファイルのベクター素材として無料ダウンロード可能です。 解像度に関係なくサイズ、色変更などを自由に行うことができる点が、ベクター素材の魅力のひとつと言えるのではないでしょうか。 あらゆる種類の「矢印」モチーフの無料ベクター素材まとめ New Vector C
プロトタイプ1000本ノック！『Retty』iOS版リニューアル、緻密さにこだわったデザインの舞台裏 | キャリアハック（CAREER HACK）
2017年12月、約3年ぶりに実名グルメサービス『Retty』iOS版アプリがリニューアルした。6ヶ月間、プロトタイプを繰り返した壮絶な日々。そこには「もっとRettyらしい体験」を実現するために並々ならぬ情熱があった。緻密なデザインに込めた思い、Rettyのビジョンをプロダクトに宿すまでのプロセスとは？ ［記事ハイライト］ ・デザイナー 山本麻友美が『Retty』iOS版のリニューアルに込めた思い ・サービス理解を深めるために、アウトプットの「量」を重視する ・重ねたミーティングは1000回以上。「Rettyらしい体験」を追求する怒涛の日々 ・“オススメ度アイコン”を刷新。必ずユーザー調査で根拠を得ていく ・「きちんと伝わる」のために、画面の構成要素すべてに意図を ・サービスの「アイデンティティ」はちゃんとプロダクトに反映されている？ ・さらにBESTなお店が見つかる体験を生み出すために
ゼロから始めるPepperタブレットの画面デザイン奮闘録 | そるでぶろぐ
デザインの決め方とは？「さぁ、画面デザインするぞ！」と意気込んだはいいものの、「デザインって具体的に何を決めればいいんだ？」と早速固まりました。そこで、いくつものサイトを練り歩いたわけですが、こちらでデザインを決める上で特に参考になったサイトをいくつかご紹介したいと思います。 こちらのサイトでは、画面デザインを決めるにあたり、何をどういう順序で決めれば良いかが紹介されております。本来はどういった構成だとどのように相手が感じるか、などの座学が必要かと思いますが、作業できる時間も限られていたため、そちらの方面の学習までは出来ませんでした（これから学ぼうと思います）。この記事では、注力したところをご紹介したいと思います。 いろんなUIを見る昨今のウェブサイトのデザインは本当に多種多様ですよね！今回作業するにあたり「折角だし…！」と、100以上のウェブサイト、スマホアプリのデザインを拝見しました。
カテゴリ別に紹介！PhotoshopやIllustratorで使えるベクター素材サイトまとめ
デザインの際によく使われるパターン素材は、簡単にデザインの中に組み込むことができて非常に便利です。 しかし、Web上にはたくさんの素材がある反面、欲しい素材を探すために意外と面倒だったり、気に入ったデザインのものが見つからないこともあります。 今回は、Illustratorで使用できる素材を、よく使われるカテゴリ別に分類してご紹介します。 使用したい素材のテーマが決まっている時にはぜひ、検討してみてください。 リボン系 1.無料で使える、リボン・帯・ラベルのフリー素材まとめ 20選 http://designup.jp/free-ribbon-343/ ポップなデザインのリボンやラベルなどの素材集です。 2.少し高級感のあるリボンフレーム【無料イラスト素材】 http://vectorclub.net/0049.html 賞状などで使われるような、高級感のあるリボン素材集です。 3.デザイ
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説
画像を使わない！CSSだけで矢印を作る方法【初心者向け】現役Webデザイナーが解説 初心者向けにCSSだけで矢印のアイコンを作る方法について解説しています。画像を使わずにCSSで矢印を作れるようになればサイト制作にも役立つはずです。実際にコードを書きながら例をもとに説明しているので、ぜひご覧ください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 今回はCSSで矢印を作る方法を説明します。 今まで画像を使って矢印をつけていたという方も、自
Websites for Text and Fonts That You’d Better Add to Bookmarks
2015年1月16日 フォント, 便利ツール 久しぶりにブックマークしているサイトを整理しました。という事でお掃除後の恒例行事？私がブックマークしているフォント・Webフォント・テキスト関連のWebサイトを、中の人へ感謝の気持ちも込めてシェアします！何年もお世話になっているサイトばかりですが、ここ最近はWebフォント関連のサイトが増えてきましたね。いいな！と思えるサイトがあれば嬉しいです。 ↑私が10年以上利用している会計ソフト！ フォント関連 フォントhack.jp フォントhack.jp 日本語の無料フォントの表示確認ができるサイト。複数のフォントを表示して比較することもできます。 dafont dafont 英字の無料フォントを大量に集めたサイト。大量すぎて眺めてたらいつも物凄く時間がたってますw ライセンスは各自要確認。 フォントガレージ フォントガレージ 日本語フォントの販売サイ
フォントな
ロゴたいぷゴシックはどんなフリーフォント？ フリーフォントのロゴたいぷゴシックは無料でダウンロードでき商用・非商用問わず使用可能です。 ロゴデザインやタイトルロゴ、見出し向けの漢字も含まれる日本語フリーフォントになります。 ロゴ向けフォントのかっこいい感じと、少しやさしくてエレガントな柔らかいデザインが特徴です。 ページ最下段のフォントのダウンロードボタンを押してダウンロードして下さい。 マイクロソフトのエクセルやワードなどお手持ちのソフトでご使用できます。 Adobeのグラフィックソフト（イラストレーター、フォトショップ）があれば アウトライン化などし編集して、よりお楽しみ頂くこともできると思います。 おしゃれな感じに使っていただけると、すごく嬉しいです。 ロゴたいぷゴシックのフォントのライセンス フォントは以下のライセンスに準じます。フォント同梱のテキストをお読み下さい。 * M+ (
レスポンシブWebデザインのWordPressテーマを作成するときに参考になるサイト - Naifix
レスポンシブデザインのテーマを作成するにあたって、多くのサイトを参考にしました。備忘録として参考サイトをご紹介します。 基本を学べるサイト レスポンシブ Web デザインの基本を学べるサイトがこちら。 レスポンシブWebデザインとは 「枝豆隊」というサイトを作成する過程を見ながら基本を学べます。HTML5＋レスポンシブデザインの概要がつかめるので、これから始める方におすすめです。 この企画は書籍化されており、動画像の対応やパフォーマンス改善など、より詳しい情報が盛り込まれています。 「枝豆隊」サンプル HTML をベースに、骨格が完成すると思います。 CSS3 を学べるサイト 骨組みができたあとは、スマホ閲覧時のデザインから始めます。 上記の「枝豆隊」のサンプルをベースに、リファレンスで調べながらデザインしていくのがよいと思います。 スタイルシートリファレンス（目的別） レスポンシブデザイ
フリー写真素材サイトまとめ15選
こんにちは。学生ライターの池澤章太です。 Webで記事を書くときや資料を作るときに、フリー写真素材をよく使うと思います。しかし、イメージに合う写真や素材を見つけるってなかなか大変です。場合によっては商用利用できるか調べるなければいけませんし。 そんなときに、商用利用ができて、無料で使える素材サイトがまとめてあると便利ですよね。 ちなみに動画素材については送別会、結婚式に！映像制作に使える無料動画素材サイトまとめをご覧ください。 今回は、23個ほど素材サイトをまとめました。この記事をブックマークしておけば素材に困ったときに役立つはず！ 【こちらもおすすめ】 無料で商用利用OKのサイト特集 商用利用できるフリー写真素材サイトまとめ23選 ここでひとつ注意を。「フリー」という単語は、なにかと誤解を招きやすいですが、著作権がフリーだったり、クレジット表記が不要だったりする意味ではありません。各素材
jQuery 簡単かつ高性能なスライダー【bxslider】の設置 – Divスライド系の中では一番のオススメです。
$(function(){ $('#slider1').bxSlider({ auto:true, speed:1000, pause:500 }); }); <div id="slider1"> <div><img src="images/new1.jpg"></div> <div><img src="images/new2.jpg"></div> <div><img src="images/new3.jpg"></div> </div> $(function(){ $('#slider2').bxSlider({ auto:true, speed:1000, mode: 'fade', captions: true }); }); <div id="slider2"> <div><img src="images/new1.jpg" title="captions"></div> <di
ウェブデザイナーとしてスキルアップするための20のメソッド
素晴らしいデザイナーは日々、自身のスキルを向上しています。 「もうここで十分です」と言って成功したデザイナーを誰も聞いたことがないでしょう。 ウェブデザイナーのスキルアップに役立つ20のメソッドを紹介します。 20 Methods for Upping Your Current Web Design Skills [ad#ad-2] 下記は各ポイントを簡潔に意訳したものです。 原文はそれぞれもう少し長いです。 ユーザーインターフェイスのデザインパターンのスタディ ウェブデザインのために最も良いUIをチェックし、研究してください。 ディテールに注意を払う 日常や他のウェブサイトのディテールを見て、自身のデザインにも多くを加える練習をしてください。 SEOのテクニック クライアントの多くはSEOサービスを提供するウェブデザイナーが好きです。 ウェブデザインのトレンドを知る ウェブトレンドは単に
[CSS]画像を使用しないで、紙テープを折り返したようにするスタイルシート
<textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Shapes</title> <!--[if IE]> <style> .arrow { top: 100%; } </style> <![endif]--> </head> <body> <div id="container"> <h1> My Heading <span class="arrow"></span> </h1> </div> </body> </html> </textarea>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【制作Tips】画面解像度一覧表 | Webデザインラボ
やじるし素材天国「矢印デザイン」
デザインサンプルで学ぶCSSによるスタイリング～「フォーム（検索ボックス）」編
新着記事
http://yusukezzz.net/blog/archives/1241
YUKI HARUYAMA Portfolio Site | 春山 有由希
