&design,LLC │ 合同会社アンドデザイン
目には見えないものたちを、 目に見える形でつなぐ、&。 LogicalとEmotionalをつなぐ、&。 ヒトとモノをつなぐ、＆。 &designでは、クライアントが伝えたいことを どのようにしたらより良く伝わるかを考えながら 『「らしさ」と調和』の視点を大切に、 ターゲットの気持ちに響くものをデザインしたいと考えています。 そのデザインに触れる人たちにとって、 「好きだな」と感じられるものを目指して。 “&” has many important roles in our design process. It links invisible things with visible forms, connects the logical “&” emotional, people “&” things, to name a few. At &design, we listen well t
なぜ私たちは「web制作会社」という古臭くてダサい肩書を使うのか？ | ベイジの社長ブログ
現在公開中の自社サイトリニューアル時に悩んだことの一つが「自分たちをどう名乗るか」ということでした。様々なことを熟考した結果、「web制作会社」が相応しいと判断したのですが、その結論に至るまでの諸々の考えを、改めてまとめてみました。 目次web制作業の実態業界で嫌われている「制作」という言葉web制作に対する市場ニーズ事業ドメインを変えるリスクドリルと穴の話ブランド・レレバンスとブランド選好性顧客の選考プロセス顧客を具体的にイメージする私たちがweb制作会社でなくなる時web制作業の実態web制作会社というのは、一般的には、「企業から依頼を受けてwebサイトを作ることができる会社」と認識されていることでしょう。しかし、具体的な業務内容は千差万別です。 2000年代中頃のFlash全盛時代あたりまでは、グラフィックデザインから派生した商業デザインの一形態として、ビジュアルデザインにプログラミ
ヒアリング事項：Webデザイン・Web制作の「要件定義」｜ワークフロー｜BACKSTAGE
Webの役割は？ ・企業宣伝/特化した商品の告知/情報提供/販売/… Webでアピールしたいことは？ ・競合他社と差別化できることは？ ・Web上では言わずにおきたいことは？(ex.価格） ターゲットユーザーは？ モバイル（スマホ）対応？
Webブラウザにおける文字のアンチエイリアスの現状の最適解｜dwango creators' blog（ドワンゴクリエイターズブログ）
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。 MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう
スマホのfont-sizeの指定で良さげな指定方法を見つけたのでご紹介いたします。 特に見出しなんかの大きな文字を使用する場面で活用できそうです。 スマホあるある見出し改行しちゃう問題 スマホのコーディングしてると、見出しやキャッチコピーなどちょっと大きい文字がデバイス幅によっては改行位置が意図しない場所になってしまうことってありませんか？ スマホデバイスの多様化に伴い結構直面する問題な気がします。 せっかくのデザインがそれだと残念ですよね。 fontをvminで指定すると改行せずに文字サイズを小さくもできる そこで登場するのがvminです。これをfont-sizeの指定に使うことで改行せずに見出しをコーディングする事ができます。 百聞は一見にしかず。早速デモを見てみましょう。 font-sizeをvminで指定したデモ デモを作りブラウザ幅の変化によってどう変わるかをGIFアニメにしてみ
Webデザイナーとは ｜https://wp.yat-net.com/name
このブログはWebサイトのデザインや制作に関することを中心に色々なジャンルに基づいて書いているのですが、そもそもWebデザイナーが何なのか？を書いたことがなかったので、今回具体的に書くことにしました。 Webデザイナーと一口に言っても、在り方が様々なので、人によっては該当しないこともあるかもしれませんが、この業界を目指す人にとっては一つの指標となると思います。 目次 Webデザイナーの仕事 ヒアリングとスケジュールについて 情報設計（IA・情報アーキテクチャー） UIデザイン モックアップ・プロトタイプの作成 ページのデザイン コーディング 仕事の分担 Webデザイナーの種類 インハウスのWebデザイナーについて Webマーケティング SEO SEM 広告運用 必要なスキルや知識 資格 Webデザイナーになるには スクールを利用する 職業訓練校に通う セミナーに参加する 独学で学ぶ Web
グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc.
友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。
cssで作るシェアボタンのデザインパターン36種類 - FOXISM
cssで作るシェアボタンのデザインパターンをたくさん考えてみました。とりあえずシェア数の表示がない、単純なボタンとして36種類あります。（色違いなども若干含みます。） 記述するhtmlはどれも同じようなものですが、一部微妙に異なるものもあります。基本的にはcssだけでデザインを決めています。アイコンフォントに関してもcssだけでほとんどやっていますが、そのコードは省略していますのでソースを見てください。 コピペでもだいたい使えると思いますが、それぞれ微調整が必要なものもあると思います。なのでコピペだけでなく自分のサイトに合わせて調整できるcss中級者以上向けですね。スマホ表示も考えてないし。（スマホで見ると崩れてるやんwと思う人はこの記事の対象外です。） というか、ローカルなhtmlで作っていたものをここにコピペしたらうまく動かないものやフォントが反映されていないものがありました。面倒なの
遅いブログは読まれない｜ひどく遅かったブログの表示速度が向上して人並みになった方法まとめ - てげろぐ
このブログ、実は最近デザインを一新させました。 それによって、ブログの表示速度がやっと人並みに向上したのでその方法をまとめておきます。 はてなブログって重い 有名はてなブログのスコアは？ 問題点１：画像が重い やったこと 問題点２：デザインを自分でいじってた やったこと テーマ入れ直し トップページを記事一覧に ソーシャルボタンを変える フォローボタンも変える 改めてスコア測定です！ 各記事ページも大事 PC・スマホ共にスコア0 遅いブログは読まれない はてなブログって重い よく語られることですが、はてなブログって表示されるまで結構時間がかかりますよね。僕のブログもなんか重いなーって思っていました。 このことについて調べていたらこういう記事を見つけました。 lifeiscolourful.hatenablog.com この記事内で紹介されている表示速度チェック法を試してみました。 Goog
イメージスライダーを魅力的に！コピペ実装できるHTMLスニペット24個まとめ
ウェブサイトでも使われることが多く、写真イメージをより魅力的に見せることができるイメージスライダー。ヒーローヘッダーとして利用されることも多く、イメージスライダーを効果的に利用することで、ウェブサイトを訪れたユーザーにより魅力的にコンテンツを見せることもできます。 今回は、ウェブサイト制作で利用したいイメージスライダーをまとめてご紹介します。どんな案件にも対応できる万能コードから、ユーザーをあっと驚かすインタラクティブなものまで幅広く揃えています。またHTMLコードはコピー&ペースト可能で、同時にカスタマイズもできてしまうので、今後のウェブ制作に役立ててみてはいかがでしょう。 【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選 ディズニー社に学ぶ！HTML/CSSで12個のアニメーション基本原則を完全再現！ 垂直型イメージスライダー くるりと回転したり、スクリーン
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！ 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の
面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方
レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、イメージオプティム とかMac Automatorとpngquantなどのツールを駆使して一生懸命に画像自体を最適化したりレスポンシブイメージを使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。 そ・こ・で！ 本日ご紹介したいのが「Responsive Image Breakpoints Generator 」です。このツールを使えばレスポンシブイメージの複数画像の作成やHTMLの記述を自動化できて、しかも！アートディレクションまで自動化できるんです。 ということで、今回はレスポンシブイメージについての簡単なおさらいと、画像作成の基本的な考え方、それから自動化について書いてみます。 では、行ってみ
AMP（Accelerated Mobile Pages）とは？今から導入するための基礎知識と手順書マニュアル
*AMP（アンプ）*とは、「Accelerated Mobile Pages」を略したもので、Googleが推奨するモバイルページの表示速度を高速化してユーザー満足度を高める手法のことです。2016年、アメリカで先立って始まったAMPは、6月20日に日本でも対応開始。今では数多くのWebページがAMPに対応しています。 今回は、AMPの基礎知識や導入方法について解説していきます。 目次 AMPとは AMPに対する各プラットフォームの現状 Google Yahoo はてなブックマーク AMPが速くなる仕組み プリレンダリングに最適化 JavaScriptが使えない ローディングに優先順位がある AMPを構成する3要素 AMP HTML AMP CDN AMP JS AMPを利用するメリット コンテンツが高速表示される 通常検索結果枠とは別の枠で表示される ユーザーのストレスを軽減できる 検索
[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
![[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/21b346cfad597981c91042909ace96f1a78b32c2/height=288;version=1;width=512/https%3A%2F%2Fd2v9k5u4v94ulw.cloudfront.net%2Fsmall_light%28dw%3D1200%2Cdh%3D630%2Cda%3Ds%2Cds%3Ds%2Ccw%3D1200%2Cch%3D630%2Ccc%3DFFFFFF%29%2Fassets%2Fimages%2F1468299%2Foriginal%2F334f34df-ae68-4ffe-a408-12dd1d5f21fb.png%3F1490245478)
Google Analytics完全連携A/Bテストツール『Google Optimize 無償版』ついにリリース | Ledge.ai
Google『お ま た せ』 ついに来ました。以前Ledgeでも紹介し、リリース予告だけで業界を激震させたABテストツール『Google Optimize』無償版公開です。（ベータ版だけど誰でも使える） とりあえずLedge編集部でソッコー触ってみたので、以下「何ができるのか？」と「どう活用するのか？」のまとめとなります。 できない事って逆に何？至れり尽くせりな無償開放 まずは気になる「何ができるんだっけ？」てとこですが、なんと『有料版とほぼ遜色なし』て感じでした。つまり、以前の記事でお知らせした以下の機能がほぼフル装備状態での無償開放になったようなんです。 ※作れるエクスペリエンス数に制限はあるけれど とりあえずできることリストGoogle Analyticsタグにちょっと加工してURL指定すればOK表示された画面をドラッグ＆ドロップ、直接コード編集でいじってテスト作成変更履歴は全部残
Webサイトに動画を埋め込む際のサイズと軽量化方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、HALです。 今回は、動画をWeb用に軽量化するための方法を紹介します！ 軽量化を行わないと、たとえば 1280px × 720pxの30秒ぐらいの動画の場合40MBほどの重さになってしまいます。そのままだと videoタグなどでWebブラウザ上で再生するには大きすぎてしまいます。モバイル端末ならさらに軽量化が必要です。 動画の軽量化をするにはさまざまなツールがありますが、 HandBrakeというツールがとても使いやすかったので、基本の設定方法を紹介していきます。 ※この記事は2022年3月に編集部が情報を更新しました 動画を埋め込む方法 外部リンクで埋め込む YouTubeやVimioに動画をアップロードし、それを外部リンクとして埋め込む方法があります。 YouTubeではさまざまなサイズの動画をアップロードすることができますが、標準のYouTube動画のサイズは1920×
ウェブ制作者なら意識してほしいCSS設計の基礎知識 - ICS MEDIA
みなさんは、CSSを書くときに管理のしやすさを意識していますか？ CSSを書くときに命名や構造のルールをシンプルにすることで、他のCSS編集者が理解しやすくなります。 何も意識せずにCSSを書くと、 誰も読めない、理解できない 何に使っているかわからない謎のルールセットがあるが、必要かもしれないので消せない CSSを修正したら意図していないパーツも修正の影響が出てしまった スタイルが上書きされすぎていて、 !important せざるを得ない といった問題が起こりやすくなります。このような問題を解決するアプローチとして、CSSを設計するという考え方があります。ウェブサイトの規模が大きくなり複雑化していく現代では、CSS設計を意識することの重要性が高まってきています。今回は、CSS設計をしたことがなくても意識してほしいCSS設計の基礎になる考え方と、基本の手法についてご紹介します。 CSS設
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLとCSSの現在のテクニックに焦点を合わせて、基本からしっかり身につけることができる良書
のんびりデザインしているような。
コーディングなんかこわくない！ アレルギー克服講座
