ホーム まとめ イケてるサイト・面白いサイトまとめ

イケてるサイト・面白いサイトまとめ

サキザキテルコ|ヘアサロンのパーソナル・サイネージメディア

サイネージきてる。
タクシー広告の進化系。
動画+モダンアニメーション+フォント

Website of the Month 2021 January | CSS DESIGN AWARDS

海外のモダンな9種類のサイト紹介。
もうWebサイトというかキャンバスです。
レスポンシブで動いてるの見ると感動領域。

デジタルノマド挑戦記 アルテガ | Webメディア

webデザインマニア平尾誠@ARUTEGA.IncさんのWebメディア。
情報整理やアイキャッチ、1記事内のクリエィティブやCTAが分かりやすく綺麗です。
ポートフォリオもオシャレ。

株式会社ライバー | コーポレートサイト

まさにライバー感、前面背景動画のサイト(PC)。
ロゴのフォントが特徴的かつ、レイアウトにこだわりを感じます。

株式会社ライデンRYDEN | コーポレートサイト

アートワークをメインにしたイケてるコーポレートサイト。
フォントがメイン、色味や質感、パターンなどが多い。
日本語フォントのカッコよさって上級です。

UX.mov | アプリのUIが動画で見れるギャラリーサイト

UX.movは様々なアプリのUIを動画で集めたギャラリーサイト
・UIまとめ
・ビデオの再生
・動画リクエスト

UIを一挙に確認出来るサイト。
アプリはダウンロード、会員登録が大変だから、UIデザイナーにはありがたいギャラリー。

バーチャル藝祭2020 │ 東京藝術大学

イラストベースの真っ赤なサイト
・アニメーション
・王冠のカスタマイズ
・入場者カウント
・ライブ配信
・トンマナ

まさにオンライン上での学祭イベントらしい演出で、実際の会場を歩いて展示を見れるのは楽しい演出。

MOV 《モブ》│ タクシー配車アプリ │ 株式会社Mobility Technologies(MoT)

クリエィティブのトーンが秀逸なサイト
・サイドメニューバー
・トップアイキャッチ
・トンマナ
・カラーコード#0f5b92のグラデーション
・モーション
・youtubeまでの統一感
・APPへの自然な導線

MOV《モブ》は、乗りたいあなたと、乗せたいタクシーを、テクノロジーでつなぐ“次世代タクシー配車アプリ“。

東京動画 | 東京都公式動画チャンネル

「東京動画」東京都公式動画チャンネル
・動画がアーカイブされているWebサイト
・伊沢拓司のクイズ!都政などのコンテンツ内容の充実
・スムーズで軽快な動作
・日英サイト
・東京都のロゴカラーに合わせた配色(#29b55b)

都政や東京の魅力を伝えるたくさんの動画で、東京の仕組みが見えてくる。
いつでも、どこでも動画で確認。
東京都の制作した動画が、ここに集まる!

焼きたてチョコレートチーズタルトLP – 株式会社BAKE

色彩感覚、食べたくなるおしゃれなランディングページ
・背景動画
・スクロールアニメーション
・スムーズな動作
・画像のクオリティ
・トンマナの秀逸性

ONE MEDIA Inc.(ワンメディア株式会社)

スクロールするのが楽しい動画背景を見事に組み込んだサイト
・スムーズな動作
・メッセージ性
・動画組み込み
・ニュース、採用一体型サイト
・モノクロトーン、ブランディング

博報堂 HAKUHODO Inc. コーポレートサイト

ToBの信頼性、徹底したシンプルさ、文字ベースのサイト
・シンプル
・ロゴとの親和性
・動作のスムーズ性
・メディア一体型サイト

サウナを探せる!楽しめる!サウナがもっと好きになるサウナポータルサイト

UI、デザイン素晴らしいです。
サクサク動くし、わかりやすくて、インパクト大。
巷のサウナブームで爆発してますね。
サ活って初めて知りました。

・サウナに行った記録や口コミを投稿・確認できる
・場所ごとの、統計情報もチェックできる(温度や設備など)
・トントゥ抽選会に参加すると、入浴券や食事券が当たる

変なWEBメディア

Webマニアとしては一回は見ておきたい、怪しげなエフェクト盛りだくさんのWebサイトです。
・劣化するWEB
・すごいWEB
・痩せるWEB

- Advertisment -
20代のフリーター向けの就職支援サービス

最新記事

2021年最新のWebデザイン・UI/UXデザイン・グラフィックデザイントレンドまとめ

目次 【2021年版】UI/UXデザインの最新トレンド10選 2021年に流行るデザインの最新トレンド10選!グラフィックデザイン&Webデザイン 2021年のUI/UXデザインのトレンドとそれらをあなたのために機能させる方法 ついに出た!2021年注目のWebデザイン人気トレンド9個まとめ 2020-2021年に注目!Webサイトアニメーションの人気トレンド7個まとめ 2021年のWebデザイントレンドが分かる参考サイト7選 2021年WEBデザイントレンド予測 2021年に注目したいWebデザイントレンド 【2021年注目のデザイントレンド】シスコム予測 2021年最新のデザイントレンド 【海外】2021年注目のWebデザイントレンド予測6選 ユーザーをワクワクさせる、最新UI/UXデザイントレンド5選【2020–2021】 【2021年版】UI/UXデザインの最新トレンド10選 2021年のトレンドの一つは、複合要素の組み込み、組み合わせです。 3D、音声、カラー、フォントなどの各要素が紹介されています。 単純な旧Webデザイン(画像+コーディング)では差別化が難しく、Webデザイナーに求められるスキルは年々増えています。 1. ダークモード 2. 没入型3D 3. 手作り感のあるデザイン 4. 奥行きのあるデザイン 5. 写真×イラスト 6. 音声を使ったUI 7. 抽象的なデータの可視化 8. 太字のフォント 9. カジュアルな文体 10. 近未来的な色の組み合わせ 2021年に流行るデザインの最新トレンド10選!グラフィックデザイン&Webデザイン アートディレクター&デザイナーのシクさんのnote。 アメリカの記事を参考にまとめられていて、他とは違うテイストです。 特に復刻しているクラシック(レトロ)デザインが、世代が変わってきている印象を受けます。 1.シンプルな幾何学模様 2.シンプルなデータビジュアライズ 3.フラットなイラスト 4.3Dなイラスト 5.グレインテクスチャ 6.クラシカルなフォント 7.カラーレス/ダブルトーン 8.絵文字デザイン 9.メタリック 10.ボクセルアート 2021年のUI/UXデザインのトレンドとそれらをあなたのために機能させる方法 UXを主軸においてピックされています。 最近では、GoogleもUX関連のランキングシグナルを公式ブログで発表しています。 テクノロジーの体験価値は、向上の余地も大きいので、導入にどのくらいの力をさけるかで差が出る部分です。 #1 リモートおよび仮想のすべてのもの #2...

Webデザイン(UIUX)のスキルハックまとめ

目次 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた 2020年のUIUXトレンド 【決定版】効果的なCTAボタンのデザイン・テキスト・配置 カスタム404ページとは 見出しの装飾・デザイン一覧 100選!半分有料(デザインのひきだしに) ソシオメディアさんがまとめた、ヒューマンインターフェースガイドライン100(2020年2月現在) 【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい 要素の順番を入れ替えられるflexboxのorderを活用しよう CSSを使って縁取り文字を表現する方法 (デザインサンプル付き) CSSレイアウト(レスポンシブデザイン)の考え方やパターンをまとめた「Every Layout」 一覧でみやすいCSSコピペサイト「See-SS」50個以上のデザインパーツ 【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた 一通り知って実践できるレベルであれば、現役は問題なし。 これから目指す方も守備範囲を知る上で大切です。 1.デザイナーならこれは読むべきメディア 2.デザインギャラリーサイト 3.figmaの使い方 4.配色 5.配置 6.素材の使い方 7.フォント 8.画像サイト 9.UX 10.EC 2020年のUIUXトレンド 2020年のトレンドをサラっていきましょう。 5Gに向けての準備期間とも言えます。 ・カスタムグラフィック ・モーショングラフィック/エフェクト ・淡いグラデーション ・スピード重視 ・ページローダー ・プロダクトオーナー 5Gのブレイクスルーで、リッチでも爆速なサイト制作(ページの長さも影響する!?)。 動画実装前提で、爆速再生が求められる。 感覚的なグラフィックやインタラクション、また鮮明伝達の重要度が上がってCVRに影響。 デザイナーやエンジニアにとっては、細分化か、複数の技術スペックか迷うところ… 【決定版】効果的なCTAボタンのデザイン・テキスト・配置 効果的なCTAボタンのデザインでCVを上げることができます。 テキスト、配置、カラー、矢印、スペースなど、ちょっとした調整で大幅にクリック率やコンバージョン率が変化します。 基礎やトレンドを抑えつつ、ABテストを行うように。 カスタム404ページとは カスタム404ページの作成は済ませていますか。 UXの高いイケてる404を見ると、Webデザイナーのスキルを感じます。 引越しやURLの変更などを行うと大量の404が発生しますので、サチコを確認しながら対処をしっかりとしましょう。 404ページ内でも、戻れるように最低でもトップリンクと、ヘッダー、フッターはつけておいて欲しいところ。 見出しの装飾・デザイン一覧 100選!半分有料(デザインのひきだしに) デザイン系のyoutube展開、見やすくて流し見ると勉強になります。 web上でも見出しの装飾は悩みのポイントなので、h1、h2、h3…などのパターンとしてCSSデザインできると良いと思います。 オウンドメディア、ブログなどでは読み進めていくためのトリガーにもなっています(滞在時間の向上)。 個人的にはモチーフを入れるというのが、イメージも定着しそうでやってみたいなと思いました。 ソシオメディアさんがまとめた、ヒューマンインターフェースガイドライン100(2020年2月現在) 1. シンプルにする 2. 簡単にする 3. メンタルモデル(ユーザーが想像する利用モデル) 4. シグニファイア(その意味が一目でわかる) 5. マッピング(操作と結果の関連) 6. 一貫性 7. ユーザーの主導権 8. 直接操作 9....

SEO(検索エンジン最適化)のスキルハックまとめ

目次 コーポレートサイトのSEOグロースの仕方 2020年のSEOを考えるには2019年まとめ ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう! 人気ブログサービスMediumが検索トラフィック激減! ブランド構築に他社サービス依存は危険。 「WEBライティングの見出しをつける際の基本事項」 コーポレートサイトのSEOグロースの仕方 LIG × ペイジ 同業に思えるけど、ポディションとネームがあってなせるコラボ。 SEOもブランディングも新規以外の、ある程度の市場規模を狙っていくとなると、強みの分析になる。 法人の強みって初期段階では個人の強みで、ここの設計がCVR(顧客転換率)ってイメージです。 頭にパッと浮かぶ個人や法人、プロダクト…。 そこを目指さないと経営は厳しい。 2020年のSEOを考えるには2019年まとめ ・権威性が「非常に強い」 ・コンテンツにコストを投じていたか ・被リンク構築を圧倒的な質と量で行っていたか これを読むと、2019年から2020年にGoogleはどこに向かっていくのか方向性が掴めます。 ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう! 記事の書き方「目次」。 目次はつけてますか?または、検討してますか。 記事の長さや種類を考えた上でプラグインなどの導入を考えましょう。 h2要素に着目。 人気ブログサービスMediumが検索トラフィック激減! ブランド構築に他社サービス依存は危険。 これはどんなプラットホームにも起こりえること。 手数として色々やるのはありだけど、自社・個人管理の本丸を育てるのは大事なこと。 「WEBライティングの見出しをつける際の基本事項」 1.ターゲットが明確になっている 2.読むことによるメリットが記載されている 3.最新の情報であることを意識する 4.感情を刺激する h1タグ〜h3など階層構造をしっかりと意識して、表示させたいキーワード検索における1位を確認し、読み手、SEO(google検索)共に高評価、シェアが得られるように意識してライティングを行うことが大切です。 文章が長いか短いかの判断ではなく、タイトルに対しての必要な情報、回答が網羅されているかどうか、それは読み手の満足度、記事の滞在率の向上に影響します。 また記事の場合、流し読んでも満足感を得られるように、タイトルの装飾、直下の適切な画像など可能な限りUXを向上させて、可読を進めてもらうのもポイントです。

無料有料で使える役に立つWebツール

目次 CodePen(コードペン)HTML、CSS、JSのコードをWeb上で確認が出来るサービス 面倒な切り抜き作業が一瞬で終わる Remove Image Background SEOチェキ! 無料で使えるSEOツール text-shadowジェネレーター 質高すぎ!ベクター素材をフリーでダウンロードできるサイトまとめ。 無料で800種類以上のウェブフォントを使用できるサービス「Google Fonts」2019年-2020年トップ10 CodePen(コードペン)HTML、CSS、JSのコードをWeb上で確認が出来るサービス フロントエンド、Webデザイナーの方へ! コードペンを暇つぶしにひたすら見るとできる人になった気分になれる。 コードで絵を書くって楽しいよね。 面倒な切り抜き作業が一瞬で終わる Remove Image Background 切り抜きの決定版。 Photoshopなどで時間のかかる、背景の切り抜きが一瞬です。 結構エグイ精度ですよ。 SEOチェキ! 無料で使えるSEOツール ページのタイトルなどmetaタグ情報(h1)やインデックス数、簡易順位チェックやキーワード出現率... 細かい分析ではなくて、記事やページ作成したらまずURL入力してgoogleにちゃんと食わせているか確認要。 text-shadowジェネレーター CSS3で使うtext-shadowのジェネレーターです。 ざっくりとシャドウを作ってくれます。 質高すぎ!ベクター素材をフリーでダウンロードできるサイトまとめ。 LIGさんの殿堂入り記事。 ベクターデータを使ってサクッといい感じの画像を作れます。 デザイン制作が苦手な方でも簡単に作れるありがたいデータ。有料無料問わず規約はチェック。 無料で800種類以上のウェブフォントを使用できるサービス「Google Fonts」2019年-2020年トップ10 1:Roboto 2:Open Sans 3:Lato 4:Montserrat 5:Roboto Condensed 6:Source Sans Pro 7:Oswald 8:Raleway 9:Merriweather 10:Roboto Mono Web制作には欠かせない、Google Fonts。 ページビュー数をランキング形式で確認するアナリティクスがあるので、チェックしてみてください。 Analytics -...

オススメ作業系創作系BGMまとめ

目次 【日本語ラップmix】〜深夜に聞くCHILL RAP〜 Japanese chill rap. mixed by DJ Tatsuki 宇多田ヒカル - 30代はほどほど。(ダイジェスト映像) 朝のタバコが100倍美味しくなる日本語ラップmix Best of Hiroyuki Sawano Vol.1 | 澤野弘之の神曲&BGM集 (42:39) 深夜に聞きたい日本語ラップMIX...