こんにちは。 スマートフォンサイトやアプリにおいて、重要なことの一つであるUI(ユーザーインターフェース)。 また、PC向けサイトでも、よりユーザー目線に立ったUI設計が必要です。 UI設計ひとつで、大きくコンバージョンが上がったり、クリック率の増加が見込めるので、入念に考えなければなりません。 今回は、UIを徹底的に考えるために、UIについて様々な視点から書かれたスライドをご紹介したいと思います。
![UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/facf0cd023a3761946699420ea646d560701378a/height=288;version=1;width=512/https%3A%2F%2Fcreive.me%2Fwp-content%2Fuploads%2F2013%2F07%2Fui_design.jpg)
こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
前にこの記事で、レスポンシブデザインをコーディングの仕方の基本的なことを説明をしましたが、今回は自分が製作してる時に気をつけていることや、よく使う方法を書いておこうと思います。 案件や作業フローによって全然違う方法がよい場合もあるかもしれませんので、参考程度にどうぞ。 要素のマークアップ順序 会社や作業フローによるかと思いますが、今のところ、PC用とスマートフォン用のデザイン2枚が出来上がってくる事が自分は多いです。 そのデザインを見ながらHTMLを作っていきますが、この時スマートフォンのデザインを見ながらマークアップしたほうが良いと思いました。 文章の意味付け的にデザインで順序変えるのはどうなのよというのはありますが・・・。 positionを使って再現するデザインの場合はPCは簡単に位置を入れ替えることができますが、スマートフォンのデザインは320px~リキッドデザインにすることが多い
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
グレースケール変換の方法は多々ありますが、どうも「モード」→「グレー」がDisられる傾向があるようなのでそれは違うよ!というところから少し。 モード→グレーは結構優秀 (実際にはモードから変換するのではなくて、「編集」→「プロファイル変換」を勧めます。これだけは設定しておきたいPhotoshopショートカットキーの小ネタ) これを変換してみましょう。 (以下マウスオーバーでこの画像に変わります) モード変換グレー 他と比べると濃いのですが、色の濃度変換は最も感覚的に近いかと。PCの方はカーソル乗せたり外したりしてみてください。 参考:osakana.factory – グレースケールのひみつの3番目 どちらにしても、オフセット印刷向けに変換するのであればこの後の調整は「必須」です。これはどの方法でも同じです。 LabモードLチャンネル Lab変換後Lチャンネルのみ表示させ、そのままモード変
CCライセンスで提供されており、個人利用ならフリーのアイコンセットがこの「Legendora Icon Set」です。ゴミ箱がクリスタルで表現されていたり、ファンタジーRPGでよく出てくるようないかにもそれっぽいアイテムの数々がくっついてフォルダアイコンが揃っていたり、Firefoxのアイコンがあったり、見た目のかわいさと実用性とを兼ね備えた使いやすくバランスの取れたアイコンセットとなっています。 ダウンロードとその他の同じような雰囲気のアイコンいろいろは以下から。 Legendora Icon Set by *Raindropmemory on deviantART http://raindropmemory.deviantart.com/art/Legendora-Icon-Set-118999011 作者はRaindropmemoryさんで、以下がアイコンセットの中身を紹介した画像で
> [日本語] > [english] - Soon フォントについて フォントのダウンロード・インストール・実際の使用によって生じたいかなる結果、損害に関してZETUEI FONTSは一切の責任を負いません。 ZETUEI FONTS より その書体で組まれた文章は、全然美しくないかもしれない。その書体で組まれた文章は、全然読めないかもしれない。 デジタル入力機器が新たな筆記具としての存在感を増す昨今、デバイスに依存した機械的に選択された書体で、今まで手書きであった部分を置換ることはできない。現代を生きる私たちには手書きに代わる自分の書体、現代書字に必要な自分自身の文字を手にいれるべきである。 ZETUEI FONTS | works 1997-2007 [NEW] 過去の制作物のアーカイブ > zetuei fonts [works 1997-2007]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く