ウェブサービスを開発しても、実際にユーザーに手に取ってもらえるようになるまでには時間と努力が必要です。どうすればユーザーが自社サイトを訪れてくれるのか、どうすればユーザーが定着するのかというアドバイスを、データセットを販売する企業「YipitData」の共同創設者兼CEOであるヴィニシウス・ヴァカンティ氏が語っています。 How To Get Your First 1,000 Users | Vinicius Vacanti http://viniciusvacanti.com/2011/02/08/how-to-get-your-first-1000-users/ ヴァカンティ氏が言うには、1000人程度をウェブサイトに導くことは、一般的に考えられるよりも簡単なことだとのこと。しかし、その1000人を繰り返し訪れてくれるユーザーに変えたり、サイトのアカウントを作成してもらったりするには大
v0とは v0は自然言語で作りたいUIをAIに指示するとそのUIをTailwind (shadcn/ui)ベースで作ってくれるサービスです。 shadcn/uiとは shadcn/uiはRadix UIというUIをもたないヘッドレスUIに対してスタイルを当てたコンポーネント集で、TailwindというCSSライブラリを使ってRadix UIに対してスタイルを当てています。 shadcn/ui本体のライブラリがあるわけではなく、自身のプロジェクトにコンポーネントを直接コピーして使うことが特徴です! Tailwindが好きな人にはたまらないコンポーネント集ですね! shadcn/uiに最適に作られていますが、Tailwindユーザーであれば作られたUIをほぼそのまま使うことができます。 下の画像のようなチャット風のUIが特徴なサービスになっていて、このチャットに指示を出すことでUIを作ってくれ
どうも、まさとらん(@0310lan)です! 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください! ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
新規プロダクトの企画時は、まず生成AIなどで開発したプロトタイプを持ってくること、企画書のみ提出はNG──DeNAが一部の部署で、ある新制度を採用していることが7月4日までに判明した。「企画書を書くより実装の方が早く、現物を見て判断した方が良い判断ができる」「企画者が生成AIの挙動を理解している方が企画の精度が上がる」といった判断に基づく制度という。 制度を採用しているのは、4月に発足した「AIイノベーション事業本部」。対象はエンジニアだけでなくビジネス職やデザイナー職などのクリエイティブ職など、同本部の全員だ。 制度導入のきっかけは前身となる組織で浮き彫りになった、企画書とプロトタイプの乖離(かいり)だ。2024年10月に発足した同組織では、企画書の制作後、プロトタイプを作るタイミングで、仕様などが当初の想定と乖離(かいり)することが増えていた。 一方、生成AIの登場や進化により「企画書
この記事は 6 年前に書いた記事を更新したものです プログラミングの生産性を上げるには - Cside::Private とても面白かったのでマネしてみた。人それぞれあると思うので自分のスタイルを。 といっても、かなり不真面目なので参考にはならないと思う。 1. README.rst を書く まず最初に何がしたいのか、どんなことをしたいのかを書く 概要、ゴール、実装方法、使用ライブラリ、TODO などを書いていく そして README.rst に擬似コードを書き始める コンパイルが通る必要は無い コメントもガンガン書いていく とにかく issues とか使わず全て README.rst に書いていく 一通り出来てきたら GitHub Issues にタスクを移す 2. 擬似コードでプロトを書く コードを書いてみないと分からない事が多いのでまずはコードを書く 自分が一番かける Erlang
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ?」と問い直すラジオを配信しています Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが(最初の投稿)、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gats
近年、UI/UXデザインで活躍するデザインツールとしてAdobe XD、Figma、Sketch、InVisionなどさまざまなツールが登場しています。本記事では日本での人気が高い「Adobe XD」と近年盛り上がりを見せている新進気鋭のデザインツール「Figma」にフォーカスして機能の紹介、比較をします。 UI/UXデザインツールには、大きく分けてデザイン機能とプロトタイプを作成し共有する機能の2種類の機能があります。今回の記事では、デザイン機能に重点を置いて紹介します。 Adobe XDを使っているけどFigmaも気になっている方や、その逆という方のデザインツール選定のヒントになればと思います。 Adobe XDとは? Adobe XDとは、2017年に正式リリースされたUI/UXデザインツールです。IllustratorやPhotoshopと操作感が似ておりAdobeユーザーであれば
Web制作やUIデザインの必須ツール「Figma」は2022年7月に日本語版がリリースされ、9月にはAdobeの傘下になることが発表され、今後もますます必須ツールとして欠かせないものなるでしょう。 Figmaの基本的な使い方をはじめ、実践的なUIデザインの制作、Figmaならではの生産性を上げ効率的なテクニックなどを詳しく解説した解説書を紹介します。 本書はリファレンスとプラクティス両方の側面があり、Figmaをこれから始める人にも、Figmaをもっと使いこなしたい人にもお勧めの一冊です。 本書は、Figma日本語版に対応した解説書です。インストール・セットアップをはじめ、基本的な使い方、Figmaならではの生産性を上げる機能の解説だけでなく、ワイヤーフレームやプロトタイプや詳細デザインの作成など実践的な作業フローまで学べます。チュートリアルに使用されるファイルは、サポートサイトからダウン
Webサイトを作る際にユーザフロー(ワイヤーフロー)を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
この記事はfreee Developers Advent Calender 2020の17日目の記事です。 こんにちは、freeeのプロダクトデザインチームで会計freeeのデザインをしたり、リサーチをしているはるたん(@hrtnde)です。 今日は構想から1年半かけて会計freeeのホーム画面をフルリニューアルした裏側を全て公開します!!! 新旧ホーム画面 会計freeeの提供から約7年、日々freeeは機能アップデートを重ねプロダクトを進化させてきた一方、ホーム画面については大きな変更を行っていませんでした。 そんなfreeeのホーム画面を大きく刷新、ついにフルリニューアル後のβ版提供も終了し、会計freeeの法人・個人アカウントのユーザー*1が新しいホーム画面を利用していただいております!(👏👏👏) リニューアルの概要については、freeeのリリースノートに載っているので、そち
「ウェブの制作コストと時間を節約したい」 「デザインを統一して、一貫性をもたせたい」 「制作に必要なものだけまとめたい」 「シェアしたときのデザインのずれを防ぎたい」 プロジェクトを続けているうちに、ページによってボタンや文字サイズ、余白スペースの幅などがばらばらで、統一感がなくなってしまった、なんて経験があるかもしれません。 さらに、複数のチームによる開発では、デザインのズレだけでなく、同じ作業を繰り返すなど非効率さが目立ち、全体のモチベーションもだだ下がりなんてことに。 一貫したデザイン設計により、技術的な問題を防ぐことができるデザインシステムを作成しようと思いつつ、最初に作るのが時間もかかって大変だから、と導入をあきらめていませんか。 今回は、デザインシステムとしてそのまま使えるFigma用おすすめUIキットをまとめてご紹介します。 プロトタイプ作成に必要なパーツが一式すべて揃い、プ
こんにちは!デザイナーの渡邊です。 前回、BDIというデザイナーの勉強会のロゴについての記事を書かせていただきました。 BASEのデザイナー勉強会『BDI NIGHT』のロゴを制作しました - BASEプロダクトチームブログ 今回はBDIでゲームを作るワークショップを企画したので、準備や当日の様子をお伝えできればと思います。 デザイナーもデザイナー以外にも楽しんでもらえる勉強会を BDIは主にデザインチームを対象とした勉強会でしたが、デザイナーが大切にしていることを知ってもらったり、デザインをより身近に感じてもらうために、デザインチーム外の方の参加も歓迎してはどうだろうかという意見が上がりました。 またBDIそもそものコンセプトとして、メンバー間のコミュニケーションを活発にしたり、リラックスして楽しんでインスピレーションを得て欲しいという目的もありました。 ワークショップや情報交換ももちろ
※この投稿は米国時間 2023 年 3 月 14 日に、Keyword に投稿されたものの抄訳です。 Google は長年に渡って AI に投資し、その成果を個人や企業、コミュニティに提供してきました。Google は、最先端の研究結果の発表や、役立つ製品の構築、人々のためになるツールやリソースの開発などを通じ、AI を誰もが利用できるものにすることを目指しています。 私たちは現在、AI の歴史において極めて重要な局面を迎えています。ジェネレーティブ AI の大きな進歩は、人々のテクノロジーとの関わり方を根本的に変えています。Google では、大規模言語モデル(LLM)を責任もって開発し、安全に製品に搭載してきました。本日、私たちは進捗状況を皆様にご共有できることを嬉しく思います。開発者や企業は、Google Cloud および新たなプロトタイプ環境の MakerSuite で、Goog
600株式会社でUXデザイナー/プロダクトマネージャーをしています。 今回は、私が1年半ほど携わっていた新規事業がついにリリースとあいなったので、主にデザイナーとしてあれこれと試行錯誤したプロセスについてまとめていきます。 ※知見やプロセスは一部ぼやかして記載してます、ご了承ください。 ■今回担当したサービスのプレスリリース ミッション600株式会社は「1分あれば何でもできる」をミッションとして、様々な角度から50m商圏を立ち上げようとしている会社です。 元々は「オフィス向け無人コンビニ事業」を基幹として立ち上がった会社で。 これまで"百貨店→スーパー→コンビニ"と、徐々に狭まってきた商圏のなかで、最もユーザーに近い商圏(50m商圏)を生み出そう!という事業をおこなっています。 商圏が細かくなると社会における人の動きに大きな影響を与えます。 従来の百貨店は日中の時間に余裕のあるときに出かけ
20年前に発表された初代iPodのプロトタイプ画像が公開されました。巨大な黄色いケースにスイッチ類が取り付けられており、正式発表直前の試作品であることがわかります。「iPodの父」と呼ばれるトニー・ファデル氏も実在したプロトタイプだと認めています。 巨大な黄色いケースに入った初代iPodプロトタイプ 先日、発表から20周年を迎えた初代iPodのプロトタイプ画像を、ソフトウェア開発企業Panicが公開しました。 黄色いケースには、小さなディスプレイ、ホイールのようなスイッチ、上下左右への移動を示す黒いボタンが並び、接続用ポートがむき出しになっています。 初代iPodを上に載せて比較すると、サイズの違いがわかります。 正式発表直前のプロトタイプを示す日付も ケースを開けると、ディスプレイとスイッチ類以外、ほぼ空洞です。 ディスプレイの裏側に貼られたシールには、2001年9月3日と、初代iPod
ターン制バトルにアクション要素を融合した戦闘システムで話題となり、発売約1か月で330万本の売り上げを記録したUnreal Engine 5製RPG『Clair Obscur: Expedition 33(クレール オブスキュール:エクスペディション33)』。 ゲームメーカーズでは、同作の開発スタジオであるフランスのSandfall Interactive来日をきっかけに、エピック ゲームズ ジャパン協力のもとショートインタビューを実施しました。 テーマは「プロトタイプ」。作品が生まれたきっかけやアイデアの具現化など、作品の開発初期段階に関する話を中心にお聞きしました。 INTERVIEW / 神山 大輝 EDIT / 藤縄 優佑
はじめに 本連載最後である第4回では、プログラミングでFigmaをあれこれ操作する方法を解説していきます。 プログラミングでFigmaを操作できるようになると、エンジニア自身の生産性アップに活用できますし、デザイナーの作業効率化やできることを増やすことにも貢献できて感謝されること間違いなしです。 Figmaに対してプログラミングを実行する3つの方法 Figmaに対してプログラミングを実行する形は大きく次の3つがあります。 REST API プラグイン ウィジェット ざっくりと次のようなメリット・デメリットがあるので、やりたいことに応じて適切な手段を選んでいきましょう。 それでは、それぞれに対して例と共に解説していきます! REST APIについて REST APIは、UIを通さず実行できるのでCIに組み込む時などに重宝します。 実行するためにはFigmaのアクセストークンを取得する必要があ
ディーゼルは新しいヒーロースニーカー「プロトタイプ(THE PROTOTYPE)」を12月6日(月)に発売します。 またデジタルファッションハウスThe Fabricant(ザ・ファブリカント)によるディーゼル初の限定NFTもリリースいたします。 「プロトタイプ」は、クリエイティブ・ディレクターのグレン・マーティンスが手掛けた全く新しい革新的なスニーカーデザインでディーゼルのフットウェアの未来の方向性を示しています。 “何か新しいことが始まる”という意味で名付けられたこのモデルは、アスレチックフットウェアデザインの限界に挑戦し、すべてのコンポーネントとあらゆる美的、技術的な角度からこれまでの常識を打ち破った一足です。 複数のラバーストラップとアシンメトリーなシューレースがグラフィカルで印象的なこのスニーカーは、2022年春夏のランウェイで初めて披露されました。全体を包み込むようにバイアスに
この記事は『最新版で比較するAdobe XDとFigmaの違い - デザイン機能編』の後編です。 前編ではAdobe XDとFigmaのデザインに関する主要な機能を比較しながら紹介しました。それぞれのツールでデザインを行う上での得意、不得意について理解いただけたかと思います。 後編では作成したデザインに画面遷移やインタラクションを追加できる「プロトタイプ機能」と、ユーザーテストやデザインのフィードバックが行える「共有リンク機能」について紹介します。最後に、各ツールに用意されている「学習手段」についても紹介します。 プロトタイプ機能の比較 プロトタイプ機能とは、デザインに画面遷移やインタラクションを追加して実際の動きを試作できる機能です。これによって、早期のユーザーテストや仕様のチェック、インタラクションのイメージ共有が容易になります。 トリガーとアクション トリガーとはユーザーが行う「クリ
こんにちは、GIGでデザインとアートディレクションを担当している向田嵩(TKC)です! UIデザイナーの多くは、一度は以下のような経験をしたことがあるのではないでしょうか? デザイナーからエンジニアにUIのアニメーションについて資料や口頭で伝えたが、実装されたものが想定と違った...実装後にお客様から「アニメーションの動きがイメージと違う」と修正依頼を受けた...いくら資料や口頭で説明しても、イメージを細部まで共有するのは難しいものです。 しかし、実際の動きをデザイン上でほぼ完全に表現できれば、このようなトラブルを防ぐことができます。今回は、GIGデザイナーが業務で使用している「Figma」というデザインツールで、実際にアニメーションを作成する方法を解説します! 弊社GIGではFigmaを活用しサイト・システム制作を行っています。コンセプト設計等UXデザインの領域から包括的な支援が可能です
ブラウザから、AI を組み込んだフルスタック アプリのプロトタイプを迅速かつ効率的に作成して出荷できます。 Firebase Studio は、API、バックエンド、フロントエンド、モバイルなど、本番環境品質のフルスタック AI アプリを構築してリリースするのに役立つエージェント型のクラウドベースの開発環境です。Firebase Studio は、Project IDX と、Firebase の Gemini による専用の AI エージェントとアシスタントを統合し、アプリケーション開発に必要なものがすべて揃った、どこからでもアクセスできるコラボレーション ワークスペースを提供します。さまざまな言語とフレームワークをサポートするテンプレートを使用して、既存のプロジェクトをインポートすることも、新しいプロジェクトを開始することもできます。
こんにちは。エピックベースという会社でPdMをやってます、marioです。 現在『スマート書記』という「音声と文字起こしを活用して議事録作成の支援するサービス」を作っています。2021年の6月にフルリニューアルし無償提供でβ版の検証、10月から有償化を開始しました。せっかくなので、ふりかえりをしたいと思います!やっていることは当たり前のことかもしれませんが、プロダクトやチーム・プロセスに興味を持ってくださった方、いま全方位で採用強化中なので是非お話しましょう〜! なぜフルリニューアルしたの? 理由は単純に、「顧客の課題を十分に解決しきれていなかったから」でした。 現行のプロダクトを改善していこうにも、2017年から運用されていて初期に作ったメンバーも残っておらず、仕様もコードも複雑化しており、にっちもさっちもいかない状態でした。一方で、ノウハウも無く、参考になる事例も少ないフルリニューアル
はじめに こんにちは!北米版あすけんアプリ「Asken Diet」のプロダクトデザイナーのNeicyです。 主にUI/UXデザインの仕事をしていますが、チーム内のUXリサーチにも携わっています。今回は、私がFigmaとMazeを使ってどのようにリサーチを活用し、どのようにデザインを検証して実用的なインサイトを生み出しているかについて紹介したいと思います。 なぜユーザーテストを行うのか? ユーザーリサーチは、UI/UXデザインのバックボーンです。ユーザーのペインやニーズを知り、プロダクトがそれらのペインやニーズにどのように対応しているかを理解しなければ、ユーザーにとって有意義で直感的な体験を生み出すことはできません。ユーザーテストは、ユーザーが実際にどのようにプロダクトを使用するかを理解するために非常に重要です。アプリは年齢や人種、性別などによって使い方が大きく異なるため、ユーザーテストを実
プロトタイプから完成品へ 「10倍の法則」 新しいプロダクトをスタートするとき、プロトタイプを作成することから始めます。 短時間でFigmaでざっと作ったプロトタイプは、 アイデアの妥当性を確かめるための大切な第一歩です。 しかし、その次のステップ、プロトタイプを完成品に持っていく下流工程の作業が、想像するよりもはるかに難しい世界です。 プロトタイプを完成品のレベルまで持ち上げるためには、10倍の時間が必要と言われています。 プロトタイプから完成品への移行は、案外地味で大変な作業です。 Figma 2023はエンジニア向けツールになった 従来、Figmaはデザイナー向けのツールとして知られていました。 しかし、2023年のこのアップデートで、Figmaはエンジニア向けの機能も強化。 特にフロントエンドエンジニアにとっては、新たな可能性が広がりました。 役割分担がどう変わったか 作業効率観点
変化が激しい市場において、価値のあるプロダクトを提供するために必要な「新規事業の不確実性との向き合い方」について解説する本連載。第1回となる今回は「新規事業が抱える不確実性とその対処法」について解説する。 企業の経営を取り巻く環境は急速に変化しています。新型コロナウイルス感染症(COVID-19)の影響もあり、会社の仕組みや事業、働き方を根本的に見直す必要が出てきています。競争優位性を得るために、イノベーションの創出やDX(デジタルトランスフォーメーション)の実現に向けた新しい取り組みを始める企業もあります。 ですが、新しい取り組みには「不確実性」が伴います。それを認識せずに開発の初期段階から多大な投資をしてしまうと「(作ってみたら)想定していた顧客課題が違っていた」「不要な機能を実装していた」「ユーザーインタフェースがユーザーに受け入れられなかった」といった問題が起こりがちです。その結果
どうも、まさとらん(@0310lan)です! 今回は、誰でも簡単にチャットボットのプロトタイプを作成して、多数の人にシェアすることで検証テストまで実現するWebサービスをご紹介します! 大規模なチャットボットの開発を行う前に、自分がイメージしているボットを素早くカタチにして繰り返し検証する用途に特化しているのが特徴です。また、テキストだけでなくAlexaなどの音声チャットもデザインできるので、ご興味ある方はぜひ参考にしてみてください! 【 Botsociety 】 ■「Botsociety」の使い方 それでは、「Botsociety」をどのように使えばいいのか詳しく見ていきましょう! まずはサイトにアクセスして【Get started for free】ボタンをクリックして無料のユーザー登録をしておきます。 ユーザー名、メールアドレス、パスワードを設定すればOKです。(Googleアカウン
viviONデザインチームはプロトタイプツールをXD→Figmaに移管しました。今年が本厄の眼鏡です!会社のすぐ近所に「ラブライブ」で有名な「神田明神」がありますので休憩時間に厄払い行ってまいりました…今年もよろしくお願いいたします! さて!UI/UXデザイナーなら大半の方がインストールされていると思われる「Adobe XD」、昔はデザイン確認をするためのアップローダー代わりになっていたソフトですが、Adobeの絶え間ぬアップデートで、今では単体アプリでWEBページを組める程使い勝手がよくなりました。 そんなXDはデザインチームでも触れないメンバーはいないくらい浸透してきましたが… 「2021年内をもちましてFigmaに移管することが決定しました。」 これだけ前振りしといて一体なぜ…? XDは日本語対応ソフトだし… Adobeアプリとの連携は便利だし… 私XDしか触った事ないんだけど!?
デザインフェーズ Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。 レスポンシブの作り方 デザインガイド・コンポーネント作成の重要性 UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。 アトミックデザインと
UIデザインツールは数多く登場しており、それぞれ個性を持っています。作業に合わせて適切なツールを選択することで、作業の効率化を図り、スムーズに業務を進められます。しかし、自社に合うUIデザインツールを選ぶときに次のような悩みがつきもの。 そこで本記事では、UIデザインツール選びに悩む担当者に向け、 ・おすすめのUIデザインツール一覧 ・選び方のポイント ・UIとUXの違い について紹介します。最後まで読むことで、目的や状況にあったUIデザインツールが選べるようになります。 UIデザインツールの乗り換えを考えている方、これからUIデザイナーを目指している方もぜひ参考にしてみてください。 ※簡単な質問に答えるだけ!さくっと見積もりが知りたい方はこちらのシミュレーションがおすすめです。回答内容をもとに、Web幹事に登録されている5,000社の料金データから見積もりを算出します。 【無料】費用をシ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く