【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ | Recruit Tech Blog
ランディングページといったコンテンツもレイアウトも全て決め打ちで成立するようなものはさておき、多くの Web サイトおよびアプリケーションは、いかなる分量のコンテンツであろうと柔軟に受け入れて表示出来るように設計・デザインされなくてはなりません。 しかし、全ての文字列を表示するには長過ぎてレイアウトが崩れてしまうといった場合には、何らかの方法で文字列を省略する必要があります。一昔であれば Ruby や PHP、Java などサーバーサイドで文字列を切り捨てるなどの加工をしてからフロントエンドに返すという方法が常套手段として用いられていました。しかし、これでは昨今のワンソースによるレスポンシブデザインといったスクリーンサイズに応じて動的に表示領域が変わるようなデザインに対応しきる事が出来ません。PCサイズの表示領域に適した文字数を返したとしてもモバイルサイズの表示領域がそれと同じとは限りませ
[Webデザイン]カーニングの件もっと | chihosh blog
先日、このブログのエントリーを見て衝撃をうけたよ！ ⇒ [Webデザイン] 文字組みについて本気出して考えてみた 正確にはこのエントリーについているはてブコメントに衝撃を受けたよ！ 「これは参考になる」とか書いてあるよ！ これって基本中の基本だと思っていたよ！ 私は紙の経験はほとんど無いけど、ウェブデザインの仕事は10年以上になるので 世の中の文字詰めの甘いサイト（やポスター）のことは同じく気になっていたよ!! 東横線の中刷りの東急のポスターとかひどいよね！ あと運用していくうちにカーニングぐちゃぐちゃになってるサイトとかね！ ということで、上のエントリーに書かれていないことで、 カーニングの基本と思われることを書いてみるよ！ 音引きは横85%、小さい「ャ」は縦横85%、「・」は縦横50%＋ベースライン調整 漢字の「一」と音引きの「ー」が似ているため。 ぱっと見で音引きとわかるように横幅を
![[Webデザイン]カーニングの件もっと | chihosh blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/2a01e1629306ca9cf40722f445a3870ff46e172e/height=288;version=1;width=512/https%3A%2F%2Fpds.exblog.jp%2Fpds%2F1%2F201102%2F17%2F53%2Fa0144753_17402048.jpg)
スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており（総務省「情報通信白書令和３年度版」）、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか？ 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴！ ぜひ一度詳細をチェ
モバイルユーザーエクスペリエンスの現状
モバイルユーザビリティについての最新の調査から、モバイルのUXが改善していることが明らかになった。レスポンシブデザインの流行の影響により、サイトやアプリでUI要素よりコンテンツが重視されるようになり、重要なコンテンツや機能がモバイルにも取り入れられるようになってきている。 The State of Mobile User Experience by Raluca Budiu on March 22, 2015 日本語版2015年4月20日公開 モバイルのUXガイドラインについてのレポート第3版では、この分野が過去7年間でどう変化してきたかについて、深く考えさせられた。2009年当時、ニールセン博士はモバイルユーザビリティという言葉は表現として矛盾していると判断した。つまり、ほとんどのモバイルサイトのユーザビリティはひどいものだった。デザイナーがデザイン空間を探索して、さまざまな選択肢を試し
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
有名Webサービスのデザインから考える、上手な料金プランの見せ方 | Goodpatch Blog
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！ SQUARESPACE http://www.squarespace.com/pricing/ プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”M
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
バナーデザインギャラリー | Banner Design Gallery
RSS feeds My Tweet ご利用上の注意 広告枠の販売 バナーサイズ別 728 × 90（134） 468 × 60（138） 234 × 60（112） 125 × 125（88） 88 × 31（90） バナーカラー別 □ ホワイト（389） ■ ブラック（272） ■ グレー（77） ■ レッド（160） ■ オレンジ（150） ■ イエロー（83） ■ グリーン（142） ■ ブルー（178） ■ パープル（25） ■ ピンク（92） ■ ブラウン（71） 地域別 日本国内（521） 海外（42） 詳細検索 728 × 90 468 × 60 234 × 60 125 × 125 88 × 31 □ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ 日本国内 海外 PR広告 ”バナーデザインギャラリー”とは バナーデザインギャラリーは、皆様からのご投稿情報を基に、かっこいいバナー
英国政府のWeb担当が作った“デジタルデザインの原則10か条”がスゴい！ | 初代編集長ブログ―安田英久
今日は、英国政府のWebサイトなどを担当する「政府デジタルサービス（GDS）」の部署が公開している「デザイン原則の10か条」について。「良いデジタルサービスを作り、運営していく」ためのポイントがコンパクトにまとめられています。 英国政府（gov.uk）のサイトには、「デザイン原則（Design Principles）」というページがあり、そこには、次のようなことが書かれています。 まずニーズからはじめる ―― 自分たちのニーズではなく、ユーザーニーズから。本当のユーザーを理解し、そのニーズを知る。想像や思い込みではなく、ちゃんとデータで。 なんでもかんでも手を広げず、するべきことだけをする ―― 政府がしなければいけないことだけをし、他の人がすでにやっていたら協力する。 データをもってデザインする ―― 試作し、実際のサイトで実際のユーザーにA/Bテストを行い、その結果をデザインに活かすや
ウェブサイトで珍しい形を取り入れたサイト14こ紹介
creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 こんにちは。最近はブログメディアのデザインを作る機会が多くなってきました。井畑です。 ブログメディアはコーポレートサイトと比べ、よりデザインや装飾等で「個性」を出す場合が多くあります。どうしたらいいかなーと思って色々悩んで、「形」で個性を出すのもありかなと思い、ウェブサイトではあまり使われづらい三角形や五角形、六角形を上手く使っているサイトを調べてみました。 やはり印象に残るものが多かったです。それでは早速見てみましょう!どうぞ！ 三角形を使ったデザイン 三角形を使う場合、余白をどう活かすかが重要になってくると思います。 Snowbird Snowbird コンテンツのサムネイルが三角形です。マウスオーバーすると折り紙が広がるように画像が広がるのも面白
漫画風デザイン制作に役立つサイト14 - Design Color
漫画風デザインのサイト 漫画風デザインを制作する際に参考になるサイトをご紹介します。 面白法人カヤック みなさんご存知のカヤックさんのサイトです。マウスホバー時に大きな集中線と共に「パンパカパーン！！」とポップな効果音が飛び出す楽しいしかけが施されています。 那覇 居酒屋いさやん こちらのサイトも大きな効果音が集中線と共に使われていてインパクト大です。黄色と黒の組み合わせも手伝ってより効果が強まっている感じがします。 Manga iPhone Application | Manga from Japan こちらはiPhoneの漫画アプリのサイトです。 漫画の一場面のイラストを背景の多様な効果音が盛り上げています。 このアプリほしい！と思いましたが、米国用のiTunesアカウントが必要なようです。 アンドロイダー こちらはAndroidアプリの紹介サイトです。元気な配色はもちろんですが、なん
これ結構使えた！サービスサイトやWordPressテーマで使われている小技まとめ
作成：2014/05/19 更新：2014/11/01 WordPress > ウェブサービスサイトや最近のWordPressテーマで使われているエフェクトや小技をまとめました。今回またjQueryが多くなってしまいましたが、サイト制作時に一手間加えたくなる小技集です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ サイト読み込み時 １．画像読み込み時、ローディング画像を表示／jQuery ２．読み込み時に文字を動かす／jQuery ヘッダー ３．文字の拡大・縮小／jQuery ４．入力補助／jQuery ５．伸縮するサーチボックス／jQuery コンテンツ ６．中心に水平線を入れる／CSS ７．均等に並べる／段組み／CSS ８．コンテンツが現れた時にアニメーションさせる／jQuery ９．マウスホバーで画像を拡大しキャプションを出す／jQuery １０．マ
ヘッダーデザインのレイアウト（構成要素の配置）が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編
HOME ブログ webデザイン , ヘッダー , 画像加工 ヘッダーデザインのレイアウト（構成要素の配置）が苦手なら黄金比・白銀比ツールを活用しよう。Photoshop編 魅せる伝えるヘッダーデザインを作成する5つの工程の2番目、ここでは② 構成要素の配置について解説します。レイアウトが苦手でどうしてもしっくりこないという悩みも黄金比ツールを活用して解決しちゃおう！ ① 基調と概念② 構成要素の配置③ 色彩の統一④ 文章の表現⑤ 細部の作り込み ↑ これじゃーちょっとカッコ悪いですよね・・ ② 構成要素の配置基調と概念に沿った画像をphotoshopで開く。 電脳狂想曲さんのWEBデザインの小技へアクセスし、ヘッダーサイズの横幅・縦幅を入力、黄金比（A4ポスターなどのJIS規格の場合白銀比のが相性が良いかも）にチェックしサクサクラインを引いていく。うまくいかなかったらリセットできます。
いざというときに便利そうな、ちょっと変わった珍しいアイコンセット - NxWorld
汎用性が高いUIアイコンなどと比べると使う場面は少ないものの、いざ使いたいときに便利そうなものやあまり見かけないタイプだと個人的に思ったアイコンセットのまとめで、過去に紹介してきたものをひとまとめにしました。 既に公開・配布終了しているものも一部あるのですが、ファイルダウンロード自体はできなくともデザイン的にはそのまま参考になることもあるので、そういったものはキャプチャが小さめではありますがリンク設定のみ解除する形で紹介します。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 リンクが未設定で配布形式も記載されていないものは公開・配布終了しているものです。
あなたが作ったサイトのフッターの役割は？12のフッター活用方法！
昔はさっぱり注目されていなかったフッターエリアですが、今では多くのクリエイターがフッターに関心を持つようになりました。フッターデザインだけを集めたサイトなんて過去にほとんどありませんでしたが、ここ2、3年でいくつもそういったサイト・ページを見るようになりました。また特に海外サイトで言えることですが、最近では「これがフッターなのか！」と思う、すごいクオリティーのフッターも見る機会が多くなりました。 皆さんは大きく関心を集めるようになったこのフッターエリアを上手に活用できていますか？ ユーザーの起こすアクションを絞る(誘導する) 皆さんはブログの記事を読み終わった後、次にどんなアクションを起こしますか？ スクロールしてトップに戻る 元々いたサイトに戻る(はてブとか) タブを閉じる ツイートしてみる なんとなくコーヒーを飲む 上記のようにユーザーは、記事を読み終わると必ず何らかのアクションを起こ
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
黄金比をサイトのデザインに取り入れる簡単な３つの方法 | コリス
その調和された比率は、トランプカードなどの日常的なものから、ギリシアのパルテノン神殿、ミロのヴィーナス、モナリザなどの芸術分野まで、多数存在します。 黄金比を使ったデザイン テクニックついては、下記も参考にどうぞ。 黄金比とは、黄金比を使ったすごいデザインテクニックのまとめ -Webデザイン・紙デザインに 黄金比を矩形に使用する 黄金比をマージンに使用する 黄金比をパーツに使用する 黄金比を矩形に使用する サイトで使用する画像などの矩形に黄金比を適応します。 サンプルでは、144pxと233pxの組み合わせを使用していますが、「1:1.6」を利用して100pxと160pxなど簡易なものでも効果はあると思います。 黄金比を横長の矩形に使用 黄金比をマージンに使用する レイアウトにグリッドシステムを取り入れマージンを使用した場合、数種類のサイズが必要になる場合が多くあります。 その際、１つの値
ロゴをどのようにデザインしたかという作り方がスケッチで分かる11の事例 - GIGAZINE
ロゴ画像を作るというのはなかなか骨の折れるクリエイティブな作業であり、しかもその製品やサービス、企業のアイデンティティというものを込めなければならず、しかも今後の「顔」にもなるので、その苦労は並大抵ではありません。そのため、実際にロゴが生み出されるまでの過程を知っておけば、ロゴをデザインする際、あるいはロゴデザインを発注する際にいろいろと役立ちます。 11 Great Examples Of How A Logo Is Born | Top Design Magazine - Web Design and Digital Content http://www.topdesignmag.com/11-great-examples-of-how-a-logo-is-born/ ◆Kaviartの場合 完成 ◆Houdiniの場合 完成 ◆Project Moonの場合 完成 ◆Xokoの場合
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
S5-Style
